导航跟随滚动条置顶移动示例代码

要实现导航跟随滚动条置顶移动，需要使用JavaScript来监听滚动事件，根据滚动条位置和导航栏高度来动态改变导航栏的样式和位置。

下面为您提供一份完整的攻略，让您轻松实现这一功能。

准备工作

首先需要在HTML文件中引入jQuery库和自己编写的JavaScript文件。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="your-script.js"></script>

然后，在HTML中添加导航栏的HTML结构。需要注意的是，导航栏必须要有固定高度，以便计算滚动时的位置。

<nav>
  <ul>
      <li><a href="#section1">Section 1</a></li>
      <li><a href="#section2">Section 2</a></li>
      <li><a href="#section3">Section 3</a></li>
      <li><a href="#section4">Section 4</a></li>
  </ul>
</nav>

编写JavaScript代码

示例一：固定在顶部

下面的示例代码可以实现将导航栏固定在页面顶部，随着滚动条向下滚动，导航栏停留在顶部位置。

$(document).ready(function(){
   $(window).scroll(function () {
      var top = $(window).scrollTop();
      var nav_height = $('nav').outerHeight();
      if (top > nav_height) {
         $('nav').addClass('sticky');
      } else {
         $('nav').removeClass('sticky');
      }
   });
});

示例二：动态移动到对应位置

下面的代码可以实现将导航栏固定在页面顶部，滚动条向下滚动时，导航栏动态移动到对应的位置，直到与下一个内容区域的顶部对齐。在滚动条向上滚动时，导航栏也会动态跟随移动回到原来的位置。

$(document).ready(function(){
   $(window).scroll(function () {
      var top = $(window).scrollTop();
      var header_height = $('header').outerHeight();
      var nav_height = $('nav').outerHeight();
      $('nav ul li a').each(function () {
         var section = $(this).attr('href');
         var section_top = $(section).offset().top - nav_height - header_height;
         var section_bottom = section_top + $(section).outerHeight();
         if (top >= section_top && top < section_bottom) {
            $('nav ul li a').removeClass('active');
            $(this).addClass('active');
            $('nav').addClass('sticky');
            $('nav').css('top', header_height);
         }
      });
      if (top < $('section').first().offset().top - nav_height - header_height) {
            $('nav ul li a').removeClass('active');
            $('nav').removeClass('sticky');
            $('nav').removeAttr('style');
      }
   });
});

添加CSS样式

最后，还需要为导航栏添加CSS样式，使其在固定在顶部或者动态移动时都能保持良好的外观。

nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

nav.sticky {
  position: fixed;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  display: block;
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
  font-size: 16px;
}

nav ul li a:hover,
nav ul li a.active {
  background-color: #eee;
}

以上就是实现导航栏跟随滚动条置顶移动的完整攻略，希望对您有所帮助。