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

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

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

想要实现更流畅的用户体验？本文提供了一种实用的解决方案，教你如何使用 JavaScript 和 jQuery 实现**滚动隐藏导航栏**，并在用户点击导航链接或页面滚动时，**动态激活对应的导航项**。通过监听滚动事件，导航栏会在向上滚动时显示，向下滚动时隐藏。同时，根据页面滚动位置和点击事件，自动更新导航链接的激活状态，确保用户始终能清晰地了解当前浏览位置。本文详细介绍了实现步骤，并提供了完整的 HTML、CSS 和 JavaScript 代码示例，助你轻松打造更具吸引力和用户友好的网站导航系统。

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

本文档旨在提供一种解决方案，用于实现导航栏在页面滚动时自动显示/隐藏，并根据用户在页面上的位置或点击的导航链接，动态激活对应的导航项。该方案结合了 JavaScript 和 jQuery，能够实现平滑滚动和激活效果。以下将详细介绍实现步骤和注意事项。

导航栏显示/隐藏

通过监听 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:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Navbar on scroll</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

  <div class="container" id="navbarSection">
    <nav class="navbar navbar-expand-lg" aria-label="Offcanvas navbar large">
      <div class="container-fluid">
        <a class="navbar-brand" href="#heroSection"><img src="./Assets/logo.svg" alt="" /></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar2" aria-controls="offcanvasNavbar2" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        <div class="offcanvas offcanvas-end mx-auto" tabindex="-1" id="offcanvasNavbar2" aria-labelledby="offcanvasNavbar2Label">
          <div class="offcanvas-header">
            <a class="navbar-brand" href="#heroSection"><img src="./Assets/logo.svg" alt="" /></a>
            <button type="button" data-bs-dismiss="offcanvas" aria-label="Close" class="closeButton">
                <img class="closeIcon" src="./Assets/cross.png" alt="Close Icon" />
              </button>
          </div>
          <div class="offcanvas-body">
            <ul class="navbar-nav align-items-center mx-auto mb-2 mb-lg-0">
              <li class="nav-item heroSection">
                <a class="nav-link active" href="#heroSection">About Us</a>
              </li>
              <li class="nav-item serviceSection">
                <a class="nav-link" href="#serviceSection">Services</a>
              </li>
              <li class="nav-item workSection">
                <a class="nav-link" href="#workSection">Work</a>
              </li>
            </ul>
            <div class="contact-us-button">
              <button class="btn blue-button">
                  <a href="#contactSection" style="text-decoration: none; color: white">Contact Us</a>
                </button>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </div>

  <section id="heroSection">
    Hero Section
  </section>
  <section id="workSection">
    Work Section
  </section>
  <section id="aboutusSection">
    About Us Section
  </section>
  <section id="serviceSection">
    Service Section
  </section>
  <section id="contactSection">
    Contact Section
  </section>

  <script src="script.js"></script>
</body>

</html>

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学习网公众号！