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ée

C'est-à-dire :

La distance entre l'élément de page et le haut de l'espace de travail du navigateur = élément DOM object.offsetTop - document .documentElement.scrollTop

1. É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 JS

"

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!