Положение fixid на вертикально прокрутки, но не горизонтально

Question

Пример:

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

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

В первой половине дня я пытался установить положение всех элементов с одинаковым классом с фиксированной для вертикальной прокрутки, чтобы показать всегда текст заголовка. Это сработало, но есть небольшая проблема. Он работал и горизонтально.

Я попытался кое-что заблокировать горизонтально или сбросить положение элементов, но у меня нет рабочего кода.

Я не могу использовать overflow-x: скрытый, потому что это требование, чтобы видеть и использовать полосу прокрутки.

После долгого поиска в Google я не нашел рабочего решения.

Элементы находятся где-то посреди страницы HTML mvc3.

Любые идеи? Показывать заголовки только в вертикальном положении, но не по горизонтали?

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