位置固定 - 水平滚动

我有一个左侧垂直侧栏，当用户垂直滚动时，侧栏与用户垂直滚动。但是，如果窗口太小，用户会水平滚动，则垂直侧栏会随着窗口一起滑动。如何停止侧栏水平滚动，而且还允许侧栏垂直滚动。位置固定 - 水平滚动

而我不想这样做。

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

来源

2012-09-22 Elmer Almeida

显示您的JavaScript和CSS是没有意义的，如果我们不能看到HTML。 – Sparky

“不是真正的问题”是人们在结束问题时经常使用的一个误导词。 – Jawad

然后固定也许是错误的appoach。

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

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

注意：您可以将此功能与动画功能结合使用，并消除窗口事件，以便每30-50毫秒触发一次，然后更新值。

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

来源

2012-09-22 15:26:55 Luke

所以你没看过最后一句话？ – Luke

我到底该怎么做？：/ –

更新了答案... – Luke

位置固定 - 水平滚动

回答

相关问题