Прилипание блока к видимым границам

[serzh82saratov]

Всем привет! Я тут новичок, не пинайте сразу если что.

Требуется аналог position sticky для IE (в режиме совместимости с 7).

Надо чтобы в одну строку текст с кнопками и с пунктирной линией проходящей под ними посередине в любой ситуации прилипал к левой и правой границе окна, то есть чтобы не участвовал в горизонтальной прокрутке, но прокручивался вертикально. Также при растягивании окна, текст за которым следуют кнопки находились слева на 20%.

То есть если сдвинуть скролл, строка с красной полоской должна остатся на месте, если растянуть окно, то красная полоса растягивается, "( Title )" немного сдвигается вправо.

Надеюсь более менее объяснил, заранее спасибо.

Забыл сказать, таких линий на форме 10 - 20 штук.

Edited November 21, 2017 by serzh82saratov

[Switch74]

https://jsfiddle.net/22vLu0tL/

[serzh82saratov]

В режиме совместимости с 7 версией z-index не работает, но это ладно, с фоном может что решу, главное что в примере оно не участвует в вертикальной прокрутке.

Edited November 21, 2017 by serzh82saratov

[serzh82saratov]

С этим ничего не получится сделать?

[Switch74]

в смысле не участвует в вертикальной прокрутке?
Блок с красной полосой ведь должен быть фиксированным как я понял?

[serzh82saratov]

23 часа назад, serzh82saratov сказал:

чтобы не участвовал в горизонтальной прокрутке, но прокручивался вертикально.

Топик.

Edited November 22, 2017 by serzh82saratov

[Switch74]

т.е. вы хотите чтобы при прокрутке вниз он уходил с экрана?
если да, то это вам через js придется делать.

[serzh82saratov]

Делал, тормозит.

[Switch74]

не правильно значит делали

[serzh82saratov]

 <script type=""text/javascript"">
   window.onscroll = function() {
    var fixDiv = document.getElementsByClassName('fix');
    for(var i = 0; i < fixDiv.length; i++){
        fixDiv[i].style.left = document.body.scrollLeft;
   }
}
   </script>

 

Тормоза одинаковы заметны с одним или несколькими элементами.

[Switch74]

https://jsfiddle.net/22vLu0tL/1/

[serzh82saratov]

С pageYOffset > 1 хорошо выглядит.

Не могу под себя сделать, выдаёт ""$" не определено". Возможно ближе к приведённому мной синтаксису сделать?

И такой косяк https://jsfiddle.net/5851uerw/ сдвигаем вправо, опускаем до конца, поднимаем и видим смещение.

Даже не так, сдвигаем вправо, опускаем и сразу видим смещение.

Edited November 22, 2017 by serzh82saratov

[Switch74]

там через jquery сделано, если не хотите его подключать, не сложно в инете найти нужные команды на js

в вашем случае нужно через цикл пробегать по всем .fixDiv и для каждого проверять if(window.pageYOffset > this.offsetTop)