Comment utiliser JavaScript pour afficher et masquer la barre de navigation fixe en bas de la page Web ?

Comment utiliser JavaScript pour afficher et masquer la barre de navigation fixe en bas de la page web ?

Dans la conception Web, la barre de navigation fixe est un élément de conception courant, qui peut fournir aux utilisateurs des fonctions de navigation pour accéder rapidement au site Web. Lorsque l'utilisateur fait défiler la page, la barre de navigation peut être fixée en bas de la page pour fournir des services de navigation continus. Cet article explique comment obtenir cet effet à l'aide de JavaScript et fournit des exemples de code spécifiques.

Pour obtenir l'effet afficher-masquer la barre de navigation fixe en bas de la page Web, elle peut être divisée en les étapes suivantes :

Étape 1 : structure HTML
Tout d'abord, créez un élément conteneur contenant la barre de navigation dans le fichier HTML, par exemple en utilisant une balise div, et définit un identifiant afin qu'il puisse être manipulé à l'aide de JavaScript.

Étape 2 : Style CSS
Définissez le style CSS pour la barre de navigation, comme la définition d'un positionnement fixe, de l'alignement du bas et d'autres propriétés. Cela garantit que la barre de navigation est toujours en bas de la page.

.navbar { position: fixed; bottom: 0; width: 100%; /* 其它样式属性 */ }

Étape 3 : Code JavaScript
Pour implémenter l'effet d'affichage et de masquage de la barre de navigation, vous devez surveiller l'événement de défilement de la page et déterminer si la barre de navigation est affichée en fonction de la position de défilement de la page.

// 获取导航栏元素 var navbar = document.getElementById("navbar"); // 监听页面滚动事件 window.addEventListener("scroll", function() { // 获取页面滚动的高度 var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; // 设置导航栏的显示或隐藏 if (scrollHeight > 200) { navbar.style.display = "none"; } else { navbar.style.display = "block"; } });

Dans le code ci-dessus, nous obtenons d'abord l'élément de la barre de navigation via la méthodedocument.getElementById, puis utilisons la méthodewindow.addEventListenerpour écouter les événements de défilement de page. . Dans la fonction de gestionnaire d'événements, nous obtenons la hauteur de défilement de la page, puis déterminons s'il faut afficher la barre de navigation en fonction de la hauteur, et obtenons l'effet d'affichage ou de masquage en modifiant l'attributstyle.displayde l’élément de la barre de navigation.document.getElementById方法获取导航栏元素，然后使用window.addEventListener方法监听页面滚动事件。在事件处理函数中，我们获取页面滚动的高度，然后根据高度判断是否显示导航栏，通过修改导航栏元素的style.display属性来实现显示或隐藏的效果。

需要注意的是，上述代码中的scrollHeight > 200

Étape 4 : Complétez l'effet

Résumé

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!