Wie erstelle ich ein Sticky Div, das beim Scrollen am oberen Bildschirmrand befestigt wird?

Erstellen eines Sticky Div, das am oberen Bildschirmrand befestigt wird

Problem:

Sie möchten ein Div erstellen, das zunächst unter einem Inhaltsblock verbleibt. Wenn Sie jedoch auf der Seite nach unten scrollen und die obere Grenze des Divs erreichen, wird es fixiert und scrollt entlang der Seite.

Lösung:

Verwendung von CSS mit einem festen Positionierungsattribut erreicht das Gewünschte Funktionalität:

.fixedElement {
    background-color: #c0c0c0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

Bearbeiten:

Um sicherzustellen, dass das Div klebrig bleibt, sollte es zunächst eine absolute Positionierung haben. Bei Erreichen des Scroll-Offsets des Elements ändert sich die Positionierung in „Fest“, wobei die obere Position auf Null gesetzt wird.

Ermitteln Sie den oberen Scroll-Offset des Dokuments mithilfe der scrollTop-Funktion:

$(window).scroll(function(e) {
    var $el = $('.fixedElement');
    var isPositionFixed = ($el.css('position') == 'fixed');
    if ($(this).scrollTop() > 200 && !isPositionFixed) {
        $el.css({'position': 'fixed', 'top': '0px'});
    }
    if ($(this).scrollTop() < 200 && isPositionFixed) {
        $el.css({'position': 'static', 'top': '0px'});
    }
});

Beim Scrollen Wenn der Offset 200 erreicht, wird das Element fixiert und bleibt am oberen Rand des Browserfensters hängen.

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