jQuery实现带滚动线条导航效果的方法

下面是“jQuery实现带滚动线条导航效果的方法”的完整攻略。

一、前置知识点

在进行本篇攻略前，你需要掌握以下 jQuery 基础知识：

1. 选择器
2. 事件
3. 动画和效果

二、实现步骤

1. 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>
  <div class="line"></div>
</nav>

<div id="section1">Section 1</div>
<div id="section2">Section 2</div>
<div id="section3">Section 3</div>
<div id="section4">Section 4</div>

其中， nav 元素包含了带有锚点链接的导航， div 元素包含了带有对应 ID 的内容区块。

1. CSS 样式

接下来，我们为网页添加 CSS 样式，如下所示：

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #fff;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  height: 100%;
  justify-content: space-around;
  align-items: center;
  font-family: Arial, sans-serif;
}

li {
  height: 100%;
}

a {
  display: inline-block;
  height: 100%;
  text-decoration: none;
  color: #000;
  padding: 0 10px;
  line-height: 50px;
}

.line {
  position: absolute;
  bottom: 0;
  height: 3px;
  background-color: #000;
  transition: all 0.3s;
}

1. JavaScript 代码

最后，我们使用 jQuery 来实现带有滚动线条导航效果的页面，如下所示：

$(document).ready(function() {
  var $nav = $('nav');
  var $line = $('.line');
  var $navLinks = $nav.find('a');
  var $sections = $('section');

  $(window).on('scroll', function() {
    var scrollTop = $(this).scrollTop();

    $sections.each(function() {
      var top = $(this).offset().top - $nav.outerHeight() - 50;
      var bottom = top + $(this).outerHeight();

      if (scrollTop >= top && scrollTop < bottom) {
        var id = $(this).attr('id');
        $navLinks.removeClass('active');
        $nav.find('[href="#' + id + '"]').addClass('active');

        var left = $nav.find('.active').offset().left - $nav.offset().left;
        $line.css({
          left: left,
          width: $nav.find('.active').outerWidth()
        });
      }
    });
  });
});

三、示例说明

在以上代码的实现中，我们使用了 $(window).on('scroll', function() {}); 来监听滚动事件，同时使用了 offset(), outerHeight() 等方法获取对象的位置信息。

示例1：点击导航链接进行页面滚动

在 a 标签中加上以下代码，则可实现点击导航链接进行页面滚动：

$('a[href^="#"]').click(function(){
  $('html, body').animate({
    scrollTop: $( $(this).attr('href') ).offset().top - $('nav').outerHeight() - 50
  }, 500);
  return false;
});

示例2：页面首次进入时高亮导航按钮

在 $(document).ready(function() {}); 中加上以下代码，则可实现页面首次进入时高亮导航按钮：

$(window).on('load', function() {
  var top = $(this).scrollTop();

  $sections.each(function() {
    var sectionTop = $(this).offset().top - $nav.outerHeight() - 50;
    var sectionBottom = sectionTop + $(this).outerHeight();

    if(top >= sectionTop && top < sectionBottom) {
      var id = $(this).attr('id');
      $nav.find('[href="#' + id + '"]').addClass('active');
    }
  });
});

以上就是“jQuery实现带滚动线条导航效果的方法”的完整攻略，希望能帮助到您。