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

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

In today’s Internet era, web design often focuses on user experience and the integrity of page functions. The web navigation bar is the bridge between users and the website, so the navigation bar is generally placed at the top of the page to facilitate users to quickly find the information they need. However, when users are browsing the web, keeping the navigation bar displayed at the top for a long time may occupy page space and make users feel inconvenient. Therefore, in order to improve the user experience, we can use JavaScript to implement the scrolling and hiding effect of the fixed navigation bar at the top of the web page.

The way to achieve this effect is to listen to scroll events and judge the display and hiding of the navigation bar based on the scroll direction and scroll distance. The following is a sample code:

// 获取导航栏元素
const navBar = document.querySelector('.navbar');
// 定义初始滚动位置
let lastScrollTop = 0;
// 定义初始导航栏高度
const navBarHeight = navBar.offsetHeight;

// 监听滚动事件
window.addEventListener('scroll', function() {
    // 获取当前滚动位置
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    // 判断滚动方向
    if (scrollTop > lastScrollTop) {
        // 向下滚动，隐藏导航栏
        navBar.style.transform = `translateY(-${navBarHeight}px)`;
    } else if (scrollTop < lastScrollTop) {
        // 向上滚动，显示导航栏
        navBar.style.transform = 'translateY(0)';
    }

    // 更新滚动位置
    lastScrollTop = scrollTop;
});

The above code first obtains the navigation bar element with the .navbar class name through document.querySelector('.navbar'). Next, we define a variable lastScrollTop to store the last scroll position, and use navBar.offsetHeight to obtain the height of the navigation bar.

Then, we listen to the scrolling event through window.addEventListener('scroll', function() { ... }). In the callback function of the scroll event, we first get the current scroll position scrollTop. Next, by judging the size relationship between the current scroll position and the last scroll position, we can determine the direction of the scroll.

If the current scroll position is greater than the last scroll position, it means that the user scrolls down, and we hide the navigation bar upwards. It should be noted that we move the navigation bar by setting the translateY property of navBar.style.transform, and use the height of the navigation bar (navBarHeight) as Displacement reference to ensure the navigation bar is completely hidden.

On the contrary, if the current scroll position is smaller than the last scroll position, it means the user scrolled up and we will redisplay the navigation bar.

Finally, we need to update the scroll position lastScrollTop for comparison in the next scroll event.

Through the above code example, we can achieve the scrolling and hiding effect of the fixed navigation bar at the top of the web page, thereby improving the user's browsing experience. Of course, according to actual needs, we can make some adjustments and improvements to the style and effect of the navigation bar to achieve better user interaction effects.

The above is the detailed content of How to use JavaScript to achieve the scrolling and hiding 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!