Das Frontend implementiert den Deckeneffekt
1. Überwachen Sie das Scroll-Ereignis und implementieren Sie die Deckenfunktion
2. CSS zum Erreichen der Obergrenze
Beim Schreiben von Seiten stoßen wir häufig auf diese Anforderung: Die Anfangsposition des Navigationsmenüs befindet sich nicht am Kopf, und wenn die Wenn die Seite verschoben wird, gleitet das Navigationsmenü an den Kopf. Die Position ist am Kopf fixiert und das Navigationsmenü kehrt zur ursprünglichen Position zurück, wenn Sie es nach unten schieben.
Die Höhe/Breite der aufgerollten Webseite (d. h. die Höhe des Seiteninhalts, der nach dem Scrollen der Browser-Bildlaufleiste ausgeblendet wird)
(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()
Arbeitsbereich der Webseite Die Höhe und Breite
(javascript) document.documentElement.clientHeight// IE firefox (jqurey) $(window).height()
Der Versatzwert des Elements von der oberen und linken Seite des Dokuments
(javascript) DOM元素对象.offsetTop //IE firefox (javascript) DOM元素对象.offsetLeft //IE firefox (jqurey) jq对象.offset().top (jqurey) jq对象.offset().left
Ermitteln Sie den Abstand des Seitenelements vom oberen Rand des Browser-Arbeitsbereichs. Abstand
Der Abstand zwischen dem Seitenelement und dem oberen Rand des Browser-Arbeitsbereichs = Der Versatzwert des Elements vom oberen Rand des document – Die Höhe der aufgerollten Webseite
Das heißt:
Der Abstand zwischen dem Seitenelement und dem oberen Rand des Browser-Arbeitsbereichs = DOM-Element object.offsetTop – Dokument. documentElement.scrollTop
1. Hören Sie sich das Scroll-Ereignis an und implementieren Sie die Deckenfunktion
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
Vielen Dank fürs Lesen, ich hoffe, Sie werden viel davon profitieren
Dieser Artikel wurde reproduziert von: https ://blog.csdn.net/zqyzqy22/article/ details/90634702
Empfohlenes Tutorial: „
JS-TutorialDas obige ist der detaillierte Inhalt vonBringen Sie Ihnen Schritt für Schritt bei, wie Sie den Deckeneffekt des Frontends erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
