Wie kann ich dafür sorgen, dass ein Div beim Scrollen am oberen Bildschirmrand bleibt?

Ein Div beim Scrollen am oberen Bildschirmrand festhalten

Ein Div erstellen, das nach einer Weile am oberen Bildschirmrand fixiert bleibt Ein bestimmter Scroll-Schwellenwert kann mit CSS oder JavaScript erreicht werden.

CSS Lösung

Mit CSS können Sie das Div als fest positionieren, sobald seine Oberkante den oberen Bildschirmrand erreicht:

.fixed-div {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

JavaScript-Lösung

Mit JavaScript können Sie die Position des Div dynamisch ändern, wenn die Bildlaufposition einen bestimmten Wert erreicht Wert:

$(window).scroll(function(e) {
    var $div = $('.fixed-div');
    var scrollTop = $(this).scrollTop();
    if (scrollTop > 200) {
        $div.css('position', 'fixed');
        $div.css('top', '0');
    } else {
        $div.css('position', 'static');
        $div.css('top', '0');
    }
});

In diesem Skript wird die jQuery-Scroll()-Funktion verwendet, um auf Scroll-Ereignisse zu warten. Wenn die scrollTop-Position 200 überschreitet, erhält das Div eine feste Position und wird an den oberen Rand der Seite gesetzt. Wenn scrollTop unter 200 fällt, kehrt das Div zu einer statischen Position zurück.

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