当前位置：首页 > 文章列表 > 文章 > 前端 > 滚动隐藏导航，点击激活链接实现

滚动隐藏导航，点击激活链接实现

2025-11-05 20:48:38 0浏览收藏

导航栏显示/隐藏

通过监听 window.onscroll 事件，可以检测页面滚动方向，从而控制导航栏的显示和隐藏。

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 和当前滚动位置 currentScrollPos。如果用户向上滚动（prevScrollpos > currentScrollPos），则显示导航栏；否则，隐藏导航栏。注意，这里假设导航栏的 ID 为 navbarSection，并且初始状态下 top 值为 0。

导航链接激活

导航链接的激活状态需要根据用户的滚动位置和点击事件进行更新。

滚动时激活

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");
    }
  });
}

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

这段代码遍历导航栏中的所有链接，并检查其对应的 section 是否在当前视口内。如果在，则添加 active 类，否则移除。

注意事项:

确保每个导航链接的 href 属性值，对应页面上相应 section 的 id 属性值。
确保页面上存在与导航链接 href 相对应的 section 元素，例如
。

点击时激活

当用户点击导航链接时，需要平滑滚动到对应的 section，并激活该链接。

$(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);
        }
      );
  });
});

这段代码首先阻止了默认的链接跳转行为，然后使用 animate 函数实现平滑滚动。滚动完成后，重新启用 onScroll 事件监听。

关键点：

e.preventDefault() 阻止默认的链接跳转行为。
$(document).off("scroll") 在滚动动画执行期间，暂停 onScroll 事件监听，防止冲突。
滚动动画完成后，重新启用 onScroll 事件监听。

完整示例

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

HTML:





  
  
  
  Navbar on scroll
  
  
  




  
    
      
        
        
        
          
            
            
          
          
            
              
                About Us
              
              
                Services
              
              
                Work
              
            
            
              
            
          
        
      
    
  

  
    Hero Section
  
  
    Work Section
  
  
    About Us Section
  
  
    Service Section
  
  
    Contact Section

CSS (style.css):

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

#navbarSection {
  position: sticky !important;
  top: 0; /* Ensure initial top value */
  background: white !important;
  transition: all .25s ease-in-out 0s !important;
}

Section {
  margin-bottom: 150px;
  height: 100vh;
  display: flex;
  align-items: center;
}

.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;
  transition: all .25s ease-in-out 0s !important;
}

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

.closeButton:hover {
  background-color: rgba(254, 205, 0, 0.8);
  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;
}

JavaScript (script.js):

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");
    }
  });
}

总结:

通过以上步骤，可以实现一个功能完善的导航栏，包括滚动显示/隐藏和导航链接激活。在实际应用中，可以根据具体需求进行调整和优化。例如，可以调整滚动动画的速度，修改激活状态的样式，或者添加更复杂的交互效果。重要的是理解代码的逻辑和原理，才能灵活运用。

本篇关于《滚动隐藏导航，点击激活链接实现》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！