如何使用 jQuery 使固定位置 Div 与内容一起水平滚动？

使用 jQuery 的固定位置 Div 的水平滚动

在本文中，我们将解决固定位置内水平内容滚动的问题使用 jQuery 定位 div。

用户有一个类为 scroll_fixed 的 div，并希望在它到达页面顶部时修复它。以下CSS样式div：

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

jQuery代码用于在div到达顶部时添加固定类：

$(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');
    }
});

这对于垂直滚动效果很好，但会导致当浏览器窗口较小时，与 div 右侧的内容发生冲突。用户希望div随内容水平滚动。

/解决方案：

要使div水平滚动，我们需要保持其position:fixed并进行操作左侧属性而不是顶部属性。以下更新的 jQuery 代码可实现此目的：

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

通过使用 leftInit，我们可以考虑 div 上的任何左边距。尝试此解决方案：http://jsfiddle.net/F7Bme/

以上是如何使用 jQuery 使固定位置 Div 与内容一起水平滚动？的详细内容。更多信息请关注PHP中文网其他相关文章！