如何使用 jQuery 使固定 Div 與頁面內容水平滾動？-css教學-PHP中文網

如何使用 jQuery 使固定 Div 與頁面內容水平滾動？

Barbara Streisand

發布： 2024-10-27 20:58:30

原創

565 人瀏覽過

How to Make a Fixed Div Scroll Horizontally with Page Content using jQuery?

使用 jQuery 水平滾動固定 Div

在這個問題中，我們使用 jQuery 和 CSS 有一個固定垂直位置的 div 元素。但是，水平滾動會導致與 div 右側的內容衝突。我們的目標是使 div 與頁面內容一起水平滾動。

解決方案包括維護元素的固定位置，但另外使用 jQuery 操作其 left 屬性：

<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>

登入後複製

透過使用 leftInit，我們可以考慮固定元素上任何可能的左邊距。這種方法允許固定 div 與內容一起水平滾動，類似於所提供資源中的第二個範例。

以上是如何使用 jQuery 使固定 Div 與頁面內容水平滾動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！