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功能更新元素绝对顶部位置（如果顶部更改），但忽略左侧属性更改时的滚动事件。

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

注意：您可以将其与animate功能结合使用，并对窗口事件进行去抖动，这样它每30-50毫秒才会触发一次，然后更新值。

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

固定位置 - 水平滚动

1 个答案: