如何使用 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中文网其他相关文章！