Comment obtenir l'effet de fixer la barre de navigation en haut de la page en JavaScript ?

JavaScript Comment obtenir l'effet de fixer la barre de navigation en haut de la page ?

Avec le développement rapide d'Internet, la production de sites Web est devenue de plus en plus importante. Afin d'améliorer l'expérience utilisateur, de nombreux sites Web ajoutent des barres de navigation aux pages pour permettre aux utilisateurs de naviguer rapidement vers d'autres pages. Cependant, lorsque l'utilisateur fait défiler la page vers le bas, la barre de navigation située à l'origine en haut de la page défile également hors de l'écran, ce qui rend difficile pour l'utilisateur une navigation pratique. Pour résoudre ce problème, nous pouvons utiliser JavaScript pour obtenir l'effet de fixer la barre de navigation en haut de la page.

Pour obtenir l'effet de fixation de la barre de navigation en haut de la page, nous pouvons utiliser JavaScript pour écouter l'événement de défilement de la page et modifier le style de l'élément de la barre de navigation lorsque les conditions sont remplies.

Tout d'abord, nous devons ajouter le balisage de la barre de navigation en HTML.

 
 
首页
 
关于我们
 
服务
 
联系我们
 
 

Ensuite, nous pouvons utiliser JavaScript pour ajouter un écouteur d'événement afin d'obtenir l'effet de fixation de la barre de navigation en haut de la page.

// 获取导航栏元素 var navbar = document.getElementById("navbar"); // 获取导航栏距离页面顶部的偏移量 var navbarOffsetTop = navbar.offsetTop; // 监听页面滚动事件 window.addEventListener("scroll", function() { // 获取当前滚动的垂直位置 var scrollY = window.pageYOffset || document.documentElement.scrollTop; // 检查是否满足固定导航栏的条件 if (scrollY >= navbarOffsetTop) { // 添加固定样式类 navbar.classList.add("fixed"); } else { // 移除固定样式类 navbar.classList.remove("fixed"); } });

Dans le code ci-dessus, nous obtenons d'abord l'élément de la barre de navigation et utilisons l'attributoffsetToppour obtenir son décalage par rapport au haut de la page. Ensuite, nous avons ajouté un écouteur d'événement de défilement, qui sera déclenché lorsque l'utilisateur fera défiler la page. À l'intérieur de la fonction, nous obtenons la position verticale actuelle du défilement et vérifions si les conditions pour une barre de navigation fixe sont remplies. Si les conditions sont remplies, nous ajoutons une classe de style appeléefixedqui fixe la barre de navigation en haut de la page. Sinon, on supprime la classe de style et la barre de navigation revient à sa position d'origine.offsetTop属性获取其距离页面顶部的偏移量。然后，我们添加了一个滚动事件监听器，当用户滚动页面时，会触发这个函数。在函数内部，我们获取当前滚动的垂直位置，并检查是否满足固定导航栏的条件。如果满足条件，我们就添加一个名为fixed的样式类，该样式类将导航栏固定在页面顶部。否则，我们就移除这个样式类，导航栏就会恢复到原来的位置。

最后，我们还需要添加 CSS 样式，来定义.fixed类的样式。

.fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; }

在上面的 CSS 样式中，我们使用了position: fixed来让导航栏元素固定在页面顶部。通过设置top: 0和left: 0，我们将导航栏元素定位到页面的左上角。设置width: 100%可以使导航栏元素占满整个页面宽度。最后，我们设置z-index: 100

rrreee

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!