Wie erstelle ich mit jQuery einen horizontalen Bildlauf mit festem Div-Inhalt?

Ein horizontal scrollendes Div mit Inhalt mithilfe von jQuery korrigieren

Frage:

Wie kann ich Die Position eines festen Div festlegen, sodass es horizontal mit dem Inhalt scrollt?

Detaillierte Beschreibung:

Ein Div-Element mit der CSS-Klasse „scroll_fixed“ wird zunächst festgelegt auf eine absolute Position. Wenn das Div jedoch den oberen Rand der Seite erreicht, fügt der jQuery-Code die Klasse „fixed“ hinzu, um seine Position festzulegen. Dieses Setup funktioniert gut für vertikales Scrollen, aber horizontales Scrollen verursacht Probleme mit Inhalten nach rechts.

Ziel:

Das Div mit dem Inhalt horizontal scrollen lassen, ähnlich wie das zweite Feld in einem bereitgestellten Beispiel.

Antwort:

Um einen horizontalen Bildlauf für das Div zu erreichen, behält die Lösung die Position des Elements bei, manipuliert jedoch seine linke Eigenschaft:

<code class="javascript">var leftInit = $(".scroll_fixed").offset().left;
var top = $('.scroll_fixed').offset().top - parseFloat($('.scroll_fixed').css('margin-top').replace(/auto/, 0));

$(window).scroll(function(event) {
    var x = 0 - $(this).scrollLeft();
    var y = $(this).scrollTop();

    // Check if the element should be fixed based on vertical scroll
    if (y >= top) {
        // if so, ad the fixed class
        $('.scroll_fixed').addClass('fixed');
    } else {
        // otherwise remove it
        $('.scroll_fixed').removeClass('fixed');
    }

    // Adjust the element's left position based on horizontal scroll
    $(".scroll_fixed").offset({
        left: x + leftInit
    });

});</code>

Dadurch wird sichergestellt, dass das Div horizontal mit dem Seiteninhalt scrollt und gleichzeitig seine feste Position vertikal beibehält.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit jQuery einen horizontalen Bildlauf mit festem Div-Inhalt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!