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

Question

示例：

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

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

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

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

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

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

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

有什么想法吗？只显示 Headers 垂直滚动，而不是水平滚动？

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

Position fixid on vertically scroll, but not horizontally