Wie erstelle ich mit jQuery einen horizontalen Bildlauf mit festem Div mit Seiteninhalt?

Horizontales Scrollen fester Divs mit jQuery

In diesem Problem haben wir ein div-Element mit einer festen vertikalen Position unter Verwendung von jQuery und CSS. Allerdings führt horizontales Scrollen zu Konflikten mit Inhalten rechts vom Div. Unser Ziel ist es, horizontales Scrollen für das Div zusammen mit dem Seiteninhalt zu ermöglichen.

Die Lösung besteht darin, die feste Position für das Element beizubehalten, aber zusätzlich seine left-Eigenschaft mit jQuery zu manipulieren:

<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();

    // Vertical positioning logic
    if (y >= top) {
        $('.scroll_fixed').addClass('fixed');
    } else {
        $('.scroll_fixed').removeClass('fixed');
    }

    // Horizontal positioning
    $(".scroll_fixed").offset({
        left: x + leftInit
    });
});</code>

Durch die Verwendung von leftInit berücksichtigen wir jeden möglichen linken Rand des festen Elements. Dieser Ansatz ermöglicht es dem festen Div, horizontal mit dem Inhalt zu scrollen, ähnlich dem zweiten Beispiel in der bereitgestellten Ressource.

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