jQuery实现电梯导航

以下是一个简单的jQuery电梯导航示例，它使用滚动事件监听器来更新导航的激活状态：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电梯导航示例</title>
<style>
  body, html {
    height: 2000px;
  }
  #navbar {
    position: fixed;
    top: 20px;
    right: 20px;
  }
  .nav-link {
    display: block;
    margin-bottom: 5px;
    text-decoration: none;
    color: #333;
  }
  .nav-link.active {
    color: #000;
    font-weight: bold;
  }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<div id="navbar">
  <a class="nav-link" href="#section1">Section 1</a>
  <a class="nav-link" href="#section2">Section 2</a>
  <a class="nav-link" href="#section3">Section 3</a>
  <a class="nav-link" href="#section4">Section 4</a>
</div>
 
<div id="section1">Content for Section 1</div>
<div id="section2">Content for Section 2</div>
<div id="section3">Content for Section 3</div>
<div id="section4">Content for Section 4</div>
 
<script>
$(document).ready(function(){
  // 定义所有导航链接
  var navLinks = $('#navbar a');
 
  // 定义一个函数来更新导航激活状态
  function updateNav() {
    var scrollPos = $(window).scrollTop();
 
    navLinks.each(function() {
      var id = $(this).attr('href');
      var offsetTop = $(id).offset().top - 70;
      if (scrollPos >= offsetTop) {
        navLinks.removeClass('active');
        $(this).addClass('active');
      }
    });
  }
 
  // 初始化导航激活状态
  updateNav();
 
  // 监听滚动事件来更新导航激活状态
  $(window).scroll(function() {
    updateNav();
  });
});
</script>
 
</body>
</html>

这段代码中，我们定义了一个名为updateNav的函数，该函数遍历所有导航链接并检查它们对应的区域是否在视口内。如果是，该导航链接被赋予.active类，表示它是当前激活的部分。此外，我们还为window对象添加了一个滚动事件监听器，以便在用户滚动时更新激活的导航项。

jQuery实现电梯导航

评论已关闭

推荐阅读