实现滚动时显示/隐藏导航栏并激活导航链接的教程

霞舞

发布时间：2025-10-08 14:26:02

355人浏览过

来源于php中文网

原创

实现滚动时显示/隐藏导航栏并激活导航链接的教程

本文档旨在提供一个实现以下功能的教程：导航栏在页面滚动时自动显示和隐藏，并且导航链接根据当前视口位置以及点击事件动态激活。我们将使用 HTML、CSS 和 JavaScript（包含 jQuery）来实现这些效果。通过本文，你将学习如何监听滚动事件、动态修改 CSS 样式以及处理导航链接的激活状态。

导航栏滚动显示/隐藏

实现导航栏在滚动时显示和隐藏的关键在于监听 window.onscroll 事件，并根据当前滚动位置与之前滚动位置的比较来动态修改导航栏的 top 样式属性。

var prevScrollpos = window.pageYOffset;

window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbarSection").style.top = "0";
  } else {
    document.getElementById("navbarSection").style.top = "-70px";
  }
  prevScrollpos = currentScrollPos;
};

这段代码首先获取页面初始的滚动位置 prevScrollpos。然后在 window.onscroll 函数中，获取当前的滚动位置 currentScrollPos，并将其与 prevScrollpos 进行比较。如果 prevScrollpos 大于 currentScrollPos，说明用户向上滚动，此时将导航栏的 top 属性设置为 "0"，使其显示。反之，如果用户向下滚动，则将 top 属性设置为 "-70px"，使其隐藏。最后，更新 prevScrollpos 为 currentScrollPos，以便下一次滚动时进行比较。

注意事项：

VIVA

一个免费的AI创意视觉设计平台

下载

确保你的导航栏元素具有 id="navbarSection" 属性，以便 JavaScript 代码能够找到它。
根据你的导航栏高度调整 -70px 的值。
为了使过渡效果更平滑，可以在 CSS 中为导航栏添加 transition 属性。

激活导航链接

激活导航链接需要两个功能：一是点击导航链接时，平滑滚动到对应的 section，并激活该链接；二是页面滚动时，根据当前视口位置，自动激活对应的导航链接。

点击激活

以下代码使用 jQuery 实现点击导航链接时的平滑滚动和激活效果：

$(document).ready(function() {
  $(document).on("scroll", onScroll);

  //smoothscroll
  $(".navbar-toggler").on("click", function(e) {
    e.preventDefault();
    $(document).off("scroll");

    $(".closeIcon").on("click", function(e) {
      $(this).removeClass("active");
    });
    $(this).addClass("active");

    var target = $(this).parents("div.container-fluid").find(".navbar-brand").attr("href")
    menu = target;
    $target = $(target);
    $("html, body")
      .stop()
      .animate({
          scrollTop: $target.offset().top + 2,
        },
        500,
        "swing",
        function() {
          window.location.hash = target;
          $(document).on("scroll", onScroll);
        }
      );
  });
});

这段代码首先在文档加载完成后，绑定 scroll 事件到 onScroll 函数。然后，监听导航链接的 click 事件。当点击链接时，首先阻止默认行为，然后移除所有导航链接的 active 类，并为当前点击的链接添加 active 类。接着，使用 animate 函数实现平滑滚动到目标 section 的效果。在滚动完成后，更新 URL 的 hash 值，并重新绑定 scroll 事件。

注意事项：

确保引入 jQuery 库。
e.preventDefault() 用于阻止默认的链接跳转行为。
$(document).off("scroll") 和 $(document).on("scroll", onScroll) 用于在滚动过程中暂停和恢复滚动事件的监听，避免冲突。
500 是动画的持续时间，可以根据需要调整。
swing 是动画的缓动函数，也可以选择其他缓动函数。

滚动激活

以下代码实现页面滚动时，根据当前视口位置自动激活对应的导航链接：

function onScroll(event) {
  var scrollPos = $(document).scrollTop();
  $("#navbarSection a").each(function() {
    var currLink = $(this);
    var refElement = $(currLink.attr("href"));
    if (
      refElement.position().top <= scrollPos &&
      refElement.position().top + refElement.height() > scrollPos
    ) {
      $("#navbarSection ul li a").removeClass("active");
      currLink.addClass("active");
    } else {
      currLink.removeClass("active");
    }
  });
}

这段代码首先获取当前的滚动位置 scrollPos。然后，遍历所有的导航链接。对于每个链接，获取其 href 属性对应的 section 元素。如果该 section 元素在视口范围内，则移除所有导航链接的 active 类，并为当前链接添加 active 类。否则，移除当前链接的 active 类。

注意事项：

确保每个导航链接的 href 属性与对应的 section 元素的 id 属性一致。
refElement.position().top 获取 section 元素相对于文档顶部的距离。
refElement.height() 获取 section 元素的高度。

完整示例代码

以下是完整的 HTML、CSS 和 JavaScript 示例代码：





  
  
  Navbar Scroll & Active
  
  
  




  
    
      
        @@##@@
        
        
          
            @@##@@
            
            
          
          
            
              
                About Us
              
              
                Services
              
              
                Work
              
            
            
              
            
          
        
      
    
  

  
    Hero Section
  
  
    Work Section
  
  
    About Us Section
  
  
    Service Section
  
  
    Contact Section

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif !important;
}

#navbarSection {
  position: sticky !important;
  top: 0; /* 添加此行 */
  background: white !important;
  transition: all .25s ease-in-out 0s !important;
  z-index: 1000; /* 确保导航栏在其他内容之上 */
}

Section {
  margin-bottom: 150px;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center; /* 水平居中内容 */
  font-size: 2em; /* 增大字体，更易于查看滚动效果 */
}

.blue-button {
  padding: 12px 24px !important;
  background-color: #3130F2 !important;
  border-radius: 37px !important;
  color: white !important;
  font-weight: 700 !important;
}

.blue-button:hover {
  background-color: #FECD00 !important;
  /* color: #3130F2 !important; */
  transition: all .25s ease-in-out 0s !important;
}

.closeButton {
  background-color: rgba(254, 205, 0, 0.4);
  /* border: none; */
  border: 1px solid transparent;
  border-radius: 10px;
}

.closeButton:hover {
  background-color: rgba(254, 205, 0, 0.8);
  /* background-color: rgba(49, 48, 242, 0.5) ; */
  /* border: none; */
  border: 1px solid #3130f2;
  border-radius: 10px;
}

.offcanvas-backdrop.show {
  opacity: 0.8;
}

.offcanvas-backdrop {
  background-color: #8E90A6;
}

.closeIcon {
  width: 40px;
  height: 40px;
}

.nav-link {
  padding: 0px !important;
  font-weight: 400;
  font-size: 20px !important;
  line-height: 40px !important;
  letter-spacing: 0.08em !important;
}

.nav-link:hover {
  color: #3130F2 !important;
  border-bottom-left-radius: 0%;
  border-bottom-right-radius: 0%;
  border-bottom: 3px solid #FECD00 !important;
  cursor: pointer !important;
  transition: all .18s ease-in-out 0s !important;
}

.nav-item:active a {
  background-color: #8E90A6 !important;
}

.navbar-nav .nav-link.active,
.navbar-nav .show>.nav-link {
  color: #3130F2 !important;
  font-weight: 600;
  border-radius: 37px;
  border-bottom-left-radius: 0%;
  border-bottom-right-radius: 0%;
  border-bottom: 3px solid #FECD00;
}

.btn:hover {
  border-color: transparent !important;
}

var prevScrollpos = window.pageYOffset;

window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbarSection").style.top = "0";
  } else {
    document.getElementById("navbarSection").style.top = "-70px";
  }
  prevScrollpos = currentScrollPos;
};

$(document).ready(function() {
  $(document).on("scroll", onScroll);

  //smoothscroll
  $(".navbar-toggler").on("click", function(e) {
    e.preventDefault();
    $(document).off("scroll");

    $(".closeIcon").on("click", function(e) {
      $(this).removeClass("active");
    });
    $(this).addClass("active");

    var target = $(this).parents("div.container-fluid").find(".navbar-brand").attr("href")
    menu = target;
    $target = $(target);
    $("html, body")
      .stop()
      .animate({
          scrollTop: $target.offset().top + 2,
        },
        500,
        "swing",
        function() {
          window.location.hash = target;
          $(document).on("scroll", onScroll);
        }
      );
  });
});

function onScroll(event) {
  var scrollPos = $(document).scrollTop();
  $("#navbarSection a").each(function() {
    var currLink = $(this);
    var refElement = $(currLink.attr("href"));
    if (
      refElement.position().top <= scrollPos &&
      refElement.position().top + refElement.height() > scrollPos
    ) {
      $("#navbarSection ul li a").removeClass("active");
      currLink.addClass("active");
    } else {
      currLink.removeClass("active");
    }
  });
}

总结：

通过以上步骤，你可以实现导航栏在滚动时自动显示和隐藏，并且导航链接根据当前视口位置以及点击事件动态激活。这个教程提供了一个基础的实现，你可以根据自己的需求进行修改和扩展。例如，你可以添加更多的导航链接和 section，或者修改动画效果和样式。记住，理解代码背后的逻辑是关键，这样才能更好地应用和定制这些技术。

html5阴影怎么加_HT5用CSS box-shadow或text-shadow给元素加阴影【添加】

HTML5表格内空格太多怎么压缩_调整表格空格的实用办法【介绍】

怎么应用样式html5_HT5用link外链或style内嵌引入CSS应用样式【应用】

html5源代码发行如何减少请求数_请求合并与资源优化方法【详解】

如何使用 CSS 简洁高效地居中图片

Windows激活工具

Windows激活工具是正版认证的激活工具，永久激活，一键解决windows许可证即将过期。可激活win7系统、win8.1系统、win10系统、win11系统。下载后先看完视频激活教程，再进行操作，100%激活成功。

下载

相关专题

js获取数组长度的方法

在js中，可以利用array对象的length属性来获取数组长度，该属性可设置或返回数组中元素的数目，只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值，也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容，供大家免费下载使用。

544

2023.06.20

js刷新当前页面

js刷新当前页面的方法：1、reload方法，该方法强迫浏览器刷新当前页面，语法为“location.reload([bForceGet]) ”；2、replace方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，不能通过“前进”和“后退”来访问已经被替换的URL，语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

372

2023.07.04

js四舍五入

js四舍五入的方法：1、tofixed方法，可把 Number 四舍五入为指定小数位数的数字；2、round() 方法，可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

727

2023.07.04

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

470

2023.09.01

JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号，可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容，供大家免费下载体验。

393

2023.09.04

js生成随机数的方法

js生成随机数的方法有：1、使用random函数生成0-1之间的随机数；2、使用random函数和特定范围来生成随机整数；3、使用random函数和round函数生成0-99之间的随机整数；4、使用random函数和其他函数生成更复杂的随机数；5、使用random函数和其他函数生成范围内的随机小数；6、使用random函数和其他函数生成范围内的随机整数或小数。

990

2023.09.04

如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍：1、内联脚本是将JavaScript代码直接嵌入到HTML标签中；2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中；3、外部脚本是将JavaScript代码放置在一个独立的文件；4、外部脚本是将JavaScript代码放置在一个独立的文件。

654

2023.09.12

Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型，用于表示独一无二的值。Symbol的特点：1、独一无二，每个Symbol值都是唯一的，不会与其他任何值相等；2、不可变性，Symbol值一旦创建，就不能修改或者重新赋值；3、隐藏性，Symbol值不会被隐式转换为其他类型；4、无法枚举，Symbol值作为对象的属性名时，默认是不可枚举的。

544

2023.09.20