5

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

我不想这样做。

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

1 回答 1

4

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

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

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

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

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

于 2012-09-22T15:26:55.657 回答