How to use JavaScript to achieve the shrinking effect of the fixed navigation bar at the top of the web page?

How to use JavaScript to achieve the shrinking effect of the fixed navigation bar at the top of the web page?

In modern web design, fixed navigation bars have become a common design element. When users scroll the page, the fixed navigation bar can remain at the top of the page, allowing users to easily browse different parts of the web page. In order to improve the user experience, sometimes we want the fixed navigation bar to shrink when the page is scrolled down to save page space. This article explains how to achieve this effect using JavaScript.

First, add a container for the fixed navigation bar in the HTML file. You can use the nav element to achieve this:

<nav id="navbar">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系方式</a></li>
  </ul>
</nav>

Next, add a CSS style to make the navigation bar fixed. At the top of the page, and set the initial height and transition effect:

#navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #ffffff;
  transition: height 0.3s ease-in-out;
  height: 60px; /* 初始高度 */
  z-index: 9999;
}

#navbar.shrink {
  height: 40px; /* 收缩后的高度 */
}

Implementing the shrinking effect of the navigation bar in JavaScript is mainly to control the style of the navigation bar by listening to the page scroll event.

window.addEventListener('scroll', function() {
  var navbar = document.getElementById('navbar');
  var scrollPosition = window.pageYOffset;

  if (scrollPosition > 100) { // 根据具体需求调整滚动位置的阀值
    navbar.classList.add('shrink');
  } else {
    navbar.classList.remove('shrink');
  }
});

In the above code, we use window.addEventListener to listen to the scroll event and trigger the callback function when the page scrolls. In the callback function, we first get the element of the navigation bar and use window.pageYOffset to get the vertical offset of the scroll. According to specific needs, the scroll position threshold for judging the shrinkage of the navigation bar can be adjusted.

When the vertical offset of the page scroll exceeds the threshold, we add the shrink class name to the navigation bar element to trigger the shrink style defined in CSS. When the scroll returns below the threshold, we remove the shrink class name and the navigation bar returns to its original style.

Finally, introduce the written JavaScript code into the page:

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

The above are the specific steps and code examples for using JavaScript to achieve the shrinking effect of the fixed navigation bar at the top of the web page. By listening to scroll events, we can dynamically change the style of the navigation bar according to the scroll position of the page to achieve a shrinking effect. In this way, users will have a better experience when browsing the web, and it can also save page space.

The above is the detailed content of How to use JavaScript to achieve the shrinking effect of the fixed navigation bar at the top of the web page?. For more information, please follow other related articles on the PHP Chinese website!