Maison > Article > interface Web > Vous apprendre étape par étape comment obtenir l'effet plafond de la partie avant
Le frontal implémente l'effet de plafond
1. Surveillez l'événement de défilement et implémentez la fonction de plafond
2. CSS pour atteindre le plafond
On rencontre souvent cette exigence lors de la rédaction des pages : la position initiale du menu de navigation n'est pas en tête, et lorsque le La page glisse, le menu de navigation glisse vers la tête. La position est fixée sur la tête et le menu de navigation revient à la position d'origine lorsque vous glissez vers le bas.
La hauteur/largeur de la page Web enroulée (c'est-à-dire la hauteur du contenu de la page masqué après le défilement de la barre de défilement du navigateur)
(javascript) document.documentElement.scrollTop //firefox (javascript) document.documentElement.scrollLeft //firefox (javascript) document.body.scrollTop //IE (javascript) document.body.scrollLeft //IE (jqurey) $(window).scrollTop() (jqurey) $(window).scrollLeft()
Zone de travail de la page Web La hauteur et la largeur de
(javascript) document.documentElement.clientHeight// IE firefox (jqurey) $(window).height()
La valeur de décalage de l'élément par rapport au haut et à gauche du document
(javascript) DOM元素对象.offsetTop //IE firefox (javascript) DOM元素对象.offsetLeft //IE firefox (jqurey) jq对象.offset().top (jqurey) jq对象.offset().left
Obtenir la distance entre l'élément de page et le haut de l'espace de travail du navigateur Distance
La distance entre l'élément de page et le haut de l'espace de travail du navigateur = La valeur de décalage de l'élément par rapport au haut de le document - La hauteur de la page Web enroulée1. Écoutez l'événement de défilement et implémentez la fonction plafond
window.addEventListener("scroll",()=>{ let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; let offsetTop = document.querySelector('#searchBar').offsetTop; if (scrollTop > offsetTop) { document.querySelector('#searchBar').style.position="fixed"; document.querySelector('#searchBar').style.top="0"; } else { document.querySelector('#searchBar').style.position=""; document.querySelector('#searchBar').style.top=""; }})
2.
position: sticky; top:0
Merci d'avoir lu, j'espère que vous en bénéficierez beaucoup
Cet article est reproduit à partir de : https ://blog.csdn.net/zqyzqy22/article /details/90634702
Tutoriel recommandé : "
Tutoriel JSCe 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!