Bringen Sie Ihnen Schritt für Schritt bei, wie Sie den Deckeneffekt des Frontends erzielen

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-Tutorial

“

Das 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!