Поместите Div "Fixed" по вертикали и "Absolute" по горизонтали внутри "Position: Relative" Div контейнера

Question

Я ищу способ создания элемента div, который будет зафиксирован на странице по вертикали, поэтому, если пользователь прокручивает страницу вниз, элемент div остается на том же месте на странице. Но располагайте его абсолютно горизонтально, поэтому, если экран пользователя уже моей веб-страницы, прокрутка вправо или влево не приведет к тому, что div переместится вместе с экраном и, в некоторых случаях, останется или наполовину видимым на краю экрана. или полностью со страницы.

Этот div должен находиться в пределах "Положения: Относительный" Div.

Я совершенно уверен, что нет никакого способа назначить разные позиции для переменной оси div, но это лучший способ описать эффект, которого я надеюсь достичь.

Пока у меня есть это, которое в основном является фиксированным делением в относительном делении.

CSS

#container {
position:relative;
width:700px;
height:1000px;
top:50px;
left:50px;
background-color:yellow;
}

#blue-box{
position:fixed;
width:100px;
height:100px;
background-color:blue;
margin-top:20px;
margin-left:400px;
{

HTML

<div id="container">
<div id="blue-box"></div>
</div>

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

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

Если нет способа достичь этого с помощью CSS, я очень рад использовать JavaScript, если он работает со всеми современными браузерами, а также с IE7 и IE8. (Именно поэтому я добавил тег JavaScript)

Кто-нибудь может мне помочь?

Answer 1

В JQuery используйте свойство scrollLeft () документа!Это будет работать

$(window).scroll(function(event) {
   $("#blue-box").css("margin-left", 400-$(document).scrollLeft());
});

См. Также

http://jsfiddle.net/zhQkq/9/

Удачи!

Редактировать: если вы хотите использовать предустановленный запасоставьте вместо жестко запрограммированного "400", используйте

$(window).scroll(function(event) {
   $("#blue-box").css("margin-left", $("#blue-box").css("margin-left")-$(document).scrollLeft());
});

Answer 2

Чтобы связать элемент # blue-box с горизонтальной прокруткой окна, используя ванильный JavaScript, было бы что-то вроде этого:

var bb = document.getElementById('blue-box');
window.addEventListener('scroll',function(event){
    bb.style.marginLeft = window.scrollX + 'px';
});

Если у него было поле, изначально определенное в px, не забудьте обрезать 'px' с конца строки, а затем преобразовать текст в int до добавления смещения window.scrollX. Затем поместите «px» обратно в конец. Такие функции, как String.replace() и parseInt() помогут в этом.

Answer 3

Вот мое решение (проверено в Opera и Firefox): http://jsfiddle.net/cCH2Z/2 Хитрость заключается в том, чтобы указать right: 0px;, это поместит поле 0px от правой границы окна.