Фикцация элемента в контейнере с прокруткой (локальный position:fixed)
Имеется контейнер с прокручиваемой областью, в нем элеменет:
<!DOCTYPE html>
<style>
#container{
position: relative;
overflow: scroll;
width: 200px;
height: 200px;
}
#staff{
width: 1000px;
height: 1000px;
}
#element{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50px;
background: rgba(255, 0, 0, 0.4);
}
</style>
<div id="container">
<div id="element"></div>
<div id="staff"></div>
</div>
Реально ли зафиксировать #element так, чтобы он не прокручивался, то есть вел себя примерно как position:fixed, но относительно не viewport'а, а контейнера? Вариант с прослушиванием onscroll не подходит, так как элемент будет дергаться. Скроллбары должны быть именно у #container |
Вот здесь глянь-скролл подвигай
http://codepen.io/paulirish/pen/CgAof |
Так position:fixed позиционируется относительно вьюпорта. А мне нужно относительно контейнера. Сама страница тоже может иметь скроллбары и сам контейнер может вообще уехать за пределы вьюпорта. Элементы с position:fixed не уедут вместе с контейнером, а так и останутся впределах вьюпорта.
|
Вряд ли получиться это сделать без наложения #element поверх #container
<!DOCTYPE html>
<style>
#container{
position: relative;
overflow: scroll;
width: 200px;
height: 200px;
}
#hack {
position: absolute;
}
#staff{
width: 1000px;
height: 1000px;
}
#element{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50px;
background: rgba(255, 0, 0, 0.4);
}
</style>
<div id="hack">
<div id="element"></div>
</div>
<div id="container">
<div id="staff"></div>
</div>
<script>
var container = document.getElementById('container'),
hack = document.getElementById('hack');
hack.style.width = container.clientWidth + 'px';
hack.style.height = container.clientHeight + 'px';
hack.style.left = container.offsetLeft + 'px';
hack.style.top = container.offsetTop + 'px';
</script>
Сорри за оффтоп: 1. почему у меня в подписи появляется "code_5149b5065efd6" вместо "return caprion;", хотя при предпросмотре все нормально? 2. как при ответе сделать кнопку "Посмотреть" вверху кода, как у danik.js в этой теме? |
Не не, это не то. Я ведь говорил - скроллбары должны быть у контейнера. А теперь фактически они не у него, а у дочернего элемента (теперь контейнер - body)
2. Добавить атрибут run. Можно нажать кнопку Цитата у кого-нибудь и посмотреть как все размечено. |
| Часовой пояс GMT +3, время: 13:37. |