Wie können Sie sicherstellen, dass ein Div trotz seiner ursprünglichen Position nach dem Scrollen fixiert bleibt?

Ein Div nach dem Scrollen reparieren

Problem: Wie können Sie sicherstellen, dass ein Div nach dem Scrollen fixiert bleibt? trotz seiner anfänglichen Position auf der Seite?

Lösung:

Um dies zu erreichen, gibt es zwei Hauptansätze:

1. Nur ​​CSS-Methode:

   • Verwenden Sie die CSS-Eigenschaft „Position: Fixed“, nachdem Sie zur gewünschten Position gescrollt haben.
   • Diese Lösung ist in modernen Browsern verfügbar (Einzelheiten finden Sie unter https://stackoverflow.com/a/53832799/1482443).

2. jQuery-Methode:

   • Achten Sie mit jQuery auf das Scroll-Ereignis.
   • Bestimmen Sie die Anfangsposition des gewünschten Divs mit der Methode offset().top.
   • Anwenden von Position: Fester Stil, wenn die Scroll-Position die Anfangsposition des Divs überschreitet positionieren und zur Position zurückkehren: statisch, andernfalls. Hier ist der jQuery-Code:

var fixmeTop = $('.fixme').offset().top;

$(window).scroll(function() {

    var currentScroll = $(window).scrollTop();

    if (currentScroll >= fixmeTop) {
        $('.fixme').css({
            position: 'fixed',
            top: '0',
            left: '0'
        });
    } else {
        $('.fixme').css({
            position: 'static'
        });
    }

});

Mit beiden Ansätzen können Sie ein Div effektiv reparieren, nachdem Sie dorthin gescrollt haben. Denken Sie daran, die Browserunterstützung zu berücksichtigen, wenn Sie zwischen den beiden Methoden wählen.

Das obige ist der detaillierte Inhalt vonWie können Sie sicherstellen, dass ein Div trotz seiner ursprünglichen Position nach dem Scrollen fixiert bleibt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!