实现滚动时显示/隐藏导航栏并激活导航链接的教程-html教程-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，以便下一次滚动时进行比较。

注意事项：

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

确保你的导航栏元素具有 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 示例代码：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navbar Scroll & Active</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
  <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>
            <!-- <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></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>

登录后复制

* {
  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，或者修改动画效果和样式。记住，理解代码背后的逻辑是关键，这样才能更好地应用和定制这些技术。

以上就是实现滚动时显示/隐藏导航栏并激活导航链接的教程的详细内容，更多请关注php中文网其它相关文章！