Я использую плагин Snap.js - (он позволяет создавать прокручивающиеся боковые ящики/панели).
Он работает, создавая 3 абсолютно позиционированных divs, один из которых содержит основной контент.
Есть ли способ расположить div, прикрепленный к верхней части окна, когда он сам находится внутри абсолютно позиционированного div.
В настоящий момент я просто получаю фиксированный div для вывода на верх абсолютно позиционированного div, а не на верхнюю часть браузера. Когда я прокручиваю, div остается фиксированным в верхней части основного содержимого, но не в окне.
Например:
<div style="position:absolute;">
<div style="position:fixed;top:0">
<!-- some content which needs to be pinned to top of window -->
</div>
</div>
В настоящий момент я использую javascript для отслеживания смещения прокрутки и вручную настраиваю верхнюю позицию дочернего div, что не идеально подходит для производительности.
Любая помощь оценивается!
Я сделал скрипку, показывающую мое обходное решение для javascript - он дрожит при прокрутке в Internet Explorer, любых идеях.
<div id="displayed-content" class="snap-content scrollable">
<div><!-- regular content --></div>
<div><!-- fixed content --></div>
<div><!-- footer content --></div>
</div>
Я немного догадываюсь о том, что вы пытаетесь сделать, но вы можете искать что-то вроде этого:
<div class="local-wrap">
<div class="fixed">
Some content which needs to be pinned to top of window
</div>
<div class="port">
Regular content...
</div>
</div>
и примените следующий CSS:
.local-wrap {
position: relative;
}
.local-wrap .fixed {
position: absolute;
top: 0;
left: 0;
background-color: lightgray;
width: 100%;
height: 5.00em;
}
.local-wrap .port {
position: relative;
top: 5.00em;
min-height: 10em;
height: 15em;
overflow: auto;
border: 1px solid gray;
border-width: 0 1px 1px 1px;
}
Демо скрипта: http://jsfiddle.net/audetwebdesign/pTJbW/
По существу, чтобы получить фиксированный блок относительно элемента блока, вам нужно использовать абсолютное позиционирование. Фиксированное позиционирование всегда относится к корневому элементу или портам просмотра, поэтому position: fixed не поможет вам.
То, что я сделал, это определить контейнер .local-wrap с двумя дочерними блоками, один из которых
позиционируется абсолютно вверху .local-wrap, а другой - в регулярном потоке. Я использовал position: relative, чтобы расположить его ниже .fixed, но верхний край также работал бы.
Я установил некоторые высоты, чтобы продемонстрировать прокрутку содержимого в локальном окне/порту, но это можно изменить в зависимости от вашего дизайна и приложения.
Отказ
Я не знаком с snap.js, поэтому могут быть рассмотрены другие соображения.
Комментарий к CSS3 Transform и Fixed Elements
В соответствии с спецификациями CSS3, если вы применяете преобразование к элементу, вызовите его div.transformed, тогда div.transformed создает новый контекст стекирования и служит в качестве содержащего блока для любых дочерних элементов фиксированной позиции, которые он содержит, поэтому в вашем сценарии контекст фиксированной позиции не остается в верхней части окна.
Для справки см. Сеть разработчиков Mozilla → Ссылка на CSS → Преобразование