Comment utiliser JavaScript pour obtenir l'effet de défilement et de masquage de la barre de navigation fixe en haut de la page Web ?

Comment utiliser JavaScript pour obtenir l'effet de défilement et de masquage de la barre de navigation fixe en haut de la page Web ?

À l’ère d’Internet d’aujourd’hui, la conception Web se concentre souvent sur l’expérience utilisateur et l’intégrité des fonctions des pages. La barre de navigation Web constitue le pont entre les utilisateurs et le site Web. Elle est donc généralement placée en haut de la page pour permettre aux utilisateurs de trouver rapidement les informations dont ils ont besoin. Cependant, lorsque les utilisateurs naviguent sur le Web, garder la barre de navigation affichée en haut pendant une longue période peut occuper de l'espace sur la page et gêner les utilisateurs. Par conséquent, afin d'améliorer l'expérience utilisateur, nous pouvons utiliser JavaScript pour implémenter l'effet de défilement et de masquage de la barre de navigation fixe en haut de la page Web.

La façon d'obtenir cet effet est d'écouter les événements de défilement et de juger de l'affichage et du masquage de la barre de navigation en fonction de la direction de défilement et de la distance de défilement. Voici l'exemple de 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; });

Le code ci-dessus obtient d'abord l'élément de barre de navigation avec le nom de classe.navbarviadocument.querySelector('.navbar'). Ensuite, nous définissons une variablelastScrollToppour stocker la dernière position de défilement, et utilisonsnavBar.offsetHeightpour obtenir la hauteur de la barre de navigation.document.querySelector('.navbar')获取了具有.navbar类名的导航栏元素。接下来，我们定义了一个变量lastScrollTop用于存储上次滚动的位置，并且使用navBar.offsetHeight获取了导航栏的高度。

然后，我们通过window.addEventListener('scroll', function() { ... })来监听滚动事件。在滚动事件的回调函数中，我们首先获取当前的滚动位置scrollTop。接下来，通过判断当前滚动位置和上次滚动位置的大小关系，我们可以确定滚动的方向。

如果当前滚动位置大于上次滚动位置，则表示用户向下滚动，我们将导航栏向上隐藏。需要注意的是，我们通过设置navBar.style.transform的translateY属性来实现导航栏的移动，将导航栏的高度（navBarHeight）作为位移参考，以保证导航栏完全隐藏。

相反，如果当前滚动位置小于上次滚动位置，则表示用户向上滚动，我们将导航栏重新显示。

最后，我们需要更新滚动位置lastScrollTop