Wie halte ich ein Div beim Scrollen am oberen Bildschirmrand?

Ein Div oben auf dem Bildschirm anheften

Um den gewünschten Effekt zu erzielen, positionieren Sie das Div unter anderen Inhalten und legen Sie seine Anfangsposition fest auf absolut oder relativ. Sobald die Seite so weit gescrollt ist, dass der obere Rand des Divs mit dem Ansichtsfenster übereinstimmt, ändern Sie die Position in „Fest“ und setzen Sie den oberen Wert auf Null zurück.

CSS:

.sticky-div {
    position: absolute;
    top: initial;
    width: 100%;
}

.sticky-div.fixed {
    position: fixed;
    top: 0;
}

JavaScript (jQuery):

$(window).scroll(function() {
    var div = $('.sticky-div'),
        scrollTop = $(this).scrollTop();

    if (scrollTop > 200) {
        div.addClass('fixed');
    } else {
        div.removeClass('fixed');
    }
});

Wenn scrollTop 200 überschreitet, wird das Div fixiert und scrollt mit dem Ansichtsfenster. Durch Zurückscrollen nach oben wird die feste Klasse entfernt und ihre ursprüngliche Position wiederhergestellt.

Das obige ist der detaillierte Inhalt vonWie halte ich ein Div beim Scrollen am oberen Bildschirmrand?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!