固定位置 - 水平滚动

Question

我有一个左侧垂直侧栏,当用户垂直滚动时,侧栏与用户垂直滚动.但是,如果窗口太小,当用户水平滚动时,垂直侧栏会随窗口一起滑动.如何阻止侧栏水平滚动,同时允许侧栏与用户垂直滚动.

我不想这样做.

overflow: hidden;

因为我希望用户能够水平滚动,但我只是不希望侧栏与它们一起出现.

这是我的javascript:

$(document).ready(function(){
    var top = $("#sidebar").offset().top;
    $(window).scroll(function(){
        var y = $(window).scrollTop();
        if (y >= top) {
            $("#sidebar").addClass('fixed');
        } else {
            $("#sidebar").removeClass('fixed');
        }
    });
});

我的css是:

#sidebar {
    position: absolute;
    height: 100%;
    min-width: 100px;
    width: 100px;
    overflow: hidden;
    background-color: #ededed;
    border-right: 1px solid #aaa
    }
#sidebar.fixed {
    position: fixed;
    height:100%;
    top: 0%;
    z-index: 1;
}

Answer 1

然后修复可能是错误的方法。

理论上，如果顶部发生变化，您可以使用该.scroll功能来更新元素的绝对顶部位置，但在 left 属性发生变化时忽略滚动事件。

请看这个小而非常简单的例子。http://jsfiddle.net/Hbkdt/

注意：您可以将其与动画功能结合起来，并对窗口事件进行反跳，以便它仅每 30-50 毫秒触发一次，然后更新值。

动画和去抖示例：http://jsfiddle.net/Hbkdt/1/