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 .navbar via document.querySelector('.navbar'). Ensuite, nous définissons une variable lastScrollTop pour stocker la dernière position de défilement, et utilisons navBar.offsetHeight pour 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

Ensuite, nous écoutons faire défiler les événements via window.addEventListener('scroll', function() { ... }). Dans la fonction de rappel de l'événement scroll, nous obtenons d'abord la position actuelle du défilement scrollTop. Ensuite, en jugeant la relation de taille entre la position actuelle de défilement et la dernière position de défilement, nous pouvons déterminer la direction du défilement.

Si la position de défilement actuelle est supérieure à la dernière position de défilement, cela signifie que l'utilisateur fait défiler vers le bas et que nous masquons la barre de navigation vers le haut. Il convient de noter que nous déplaçons la barre de navigation en définissant la propriété translateY de navBar.style.transform et modifions la hauteur de la barre de navigation (navBarHeight code >) comme référence de déplacement pour garantir que la barre de navigation est complètement masquée. 🎜🎜Au contraire, si la position de défilement actuelle est inférieure à la dernière position de défilement, cela signifie que l'utilisateur a fait défiler vers le haut et nous réafficherons la barre de navigation. 🎜🎜Enfin, nous devons mettre à jour la position de défilement <code>lastScrollTop pour comparaison lors du prochain événement de défilement. 🎜🎜Avec l'exemple de code ci-dessus, nous pouvons obtenir l'effet de défilement et de masquage de la barre de navigation fixe en haut de la page Web, améliorant ainsi l'expérience de navigation de l'utilisateur. Bien entendu, en fonction des besoins réels, nous pouvons apporter quelques ajustements et améliorations au style et à l'effet de la barre de navigation pour obtenir de meilleurs effets d'interaction utilisateur. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!