javascript - 位置固定在垂直滚动上，但不是水平滚动

Question

例子:

<div>
   <div class="sloth">
       Header1
   </div>

   <div class="sloth">
       Header2
   </div>
</div>

前半天我尝试将所有具有相同类的元素的位置固定为垂直滚动以始终显示标题文本。它起作用了，但是有一个小问题。它也可以横向工作。

我尝试了一些东西来水平阻塞或重置元素的位置，但我没有工作代码。

我不能使用 overflow-x:hidden，因为需要查看和使用滚动条。

在 Google 上搜索了很长时间后，我没有找到可行的解决方案。

元素位于 mvc3 HTML 页面中间的某处。

有什么想法吗？仅在垂直滚动而不是水平滚动时显示标题？

Answer 1

您将需要使用一些 javascript 来确定水平滚动并处理左侧位置...参见 this fiddle

这个javascript:

$(window).scroll(function(e){
   $('#stickMe').css('left', ($(window).scrollLeft() * -1) );
});

对于这个 CSS

#stickMe{
    position:fixed;
    top:0;
    left:0;
    padding:40px;
    background:#ccc;
}