将fixid定位在垂直滚动上，但不是水平滚动

Question

示例：

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

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

前半天我试图将所有具有相同类别的元素的位置设置为固定以垂直滚动以始终显示标题文本。它有效，但有一点问题。它也横向工作。

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

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

经过长时间的搜索，我发现没有可行的解决方案。

元素位于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;
}