Wie erstelle ich mit jQuery einen horizontalen Div-Bildlauf mit fester Position und Inhalt?

Horizontales Scrollen eines Divs mit fester Position mit jQuery

In diesem Artikel befassen wir uns mit dem Problem des horizontalen Scrollens von Inhalten innerhalb eines Divs mit fester Position Positionieren Sie ein Div mit jQuery.

Ein Benutzer hat ein Div mit einer Klasse scroll_fixed und möchte es reparieren, wenn es den oberen Rand der Seite erreicht. Das folgende CSS formatiert das Div:

.scroll_fixed {
    position:absolute
    top:210px
}
.scroll_fixed.fixed {
    position:fixed;
    top:0;
}

jQuery-Code wird verwendet, um eine feste Klasse hinzuzufügen, wenn das Div den oberen Rand erreicht:

$(window).scroll(function (event) {
    // Check if the scroll position is greater than the top offset of the div
    if ($(this).scrollTop() >= top) {
        $('.scroll_fixed').addClass('fixed');
    } else {
        $('.scroll_fixed').removeClass('fixed');
    }
});

Dies funktioniert gut für vertikales Scrollen, verursacht jedoch Probleme ein Konflikt mit Inhalten rechts vom Div, wenn das Browserfenster klein ist. Der Benutzer möchte, dass das Div horizontal mit dem Inhalt scrollt.

/Lösung:

Damit das Div horizontal scrollt, müssen wir seine Position beibehalten und manipulieren die linke Eigenschaft anstelle der oberen. Der folgende aktualisierte jQuery-Code erreicht dies:

var leftInit = $(".scroll_fixed").offset().left;

$(window).scroll(function (event) {
    // Get the current scroll positions
    var x = 0 - $(this).scrollLeft();
    var y = $(this).scrollTop();

    // Fix the div when it reaches the top
    if (y >= top) {
        $('.scroll_fixed').addClass('fixed');
    } else {
        $('.scroll_fixed').removeClass('fixed');
    }

    // Adjust the left offset of the div based on the scroll position
    $(".scroll_fixed").offset({
        left: x + leftInit
    });
});

Durch die Verwendung von leftInit berücksichtigen wir jeden linken Rand des div. Probieren Sie diese Lösung unter: http://jsfiddle.net/F7Bme/

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