js计算滚轮滚动到导航组件时吸顶

最新推荐文章于 2024-12-26 15:32:46 发布

莫西干小皮蛇

最新推荐文章于 2024-12-26 15:32:46 发布

阅读量406

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_41411324/article/details/113588839

本文介绍了一种使用JavaScript实现网页导航栏吸顶效果的方法。当页面滚动到一定距离时，导航栏会固定在顶部；反之则恢复相对定位。文章提供了完整的HTML、CSS和JS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

吸顶方法：

// 吸顶
const scroll = function () {
  if (document.body.scrollTop >= 300 || document.documentElement.scrollTop >= 300) {
    document.querySelector('.nav').style.position = 'fixed'
    document.querySelector('.nav').style.top = '0'
  } else if (document.body.scrollTop <= 300 || document.documentElement.scrollTop <= 300) {
    document.querySelector('.nav').style.position = 'relative'
    document.querySelector('.nav').style.top = '300px'
  }
}

调用：

window.onscroll = document.body.onscroll = scroll

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body {
    width: 100%;
    min-height: 200vh;
    position: relative;
    padding: 0;
    margin: 0;
  }
  .nav {
    /* position: fixed; */
    position: relative;
    top: 300px;
    width: 100%;
    height: 50px;
    background-color: rgb(40, 128, 101);
  }
</style>
<body>
  <div class="nav"></div>
</body>
<script>
// 吸顶
const scroll = function () {
  if (document.body.scrollTop >= 300 || document.documentElement.scrollTop >= 300) {
    document.querySelector('.nav').style.position = 'fixed'
    document.querySelector('.nav').style.top = '0'
  } else if (document.body.scrollTop <= 300 || document.documentElement.scrollTop <= 300) {
    document.querySelector('.nav').style.position = 'relative'
    document.querySelector('.nav').style.top = '300px'
  }
}

// document.body.addEventListener('scroll', scroll, false)
window.onscroll = document.body.onscroll = scroll
</script>
</html>