固定位置 – 水平滚动

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

我不想这样做。

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

然后修复可能是错误的appoach。

理论上，如果顶部更改，您可以使用.scrollfunction更新元素绝对顶部位置，但是当左侧属性更改时忽略滚动事件。

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

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

动画和去抖动的例子： http ： //jsfiddle.net/Hbkdt/1/