Как избежать положения: фиксированное положение на экране при вертикальной прокрутке?

Question

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

Проблема заключается в том, что при прокрутке по вертикали верхние ссылки остаются в верхней части страницы даже при прокрутке вниз, поэтому они отображаются над моим основным содержанием.

Каким образом можно заставить текст перемещаться вправо, но не двигаться при вертикальной прокрутке?

Вот мой CSS сегодня:

#toplinks ul
{
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:transparent none repeat scroll 0 0;
    border:medium none;
    color:#2F6FAB;
    cursor:default;
    line-height:1.4em;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0;
    padding:0 1em 0 1em;
    text-align:right;
    z-index:0;
    font-size: 85%;

    position:fixed;
    right:0;
}

Answer 1

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

Код CSS такой же:

#sticky
{
    background:red;
    position: fixed;
    top: 0px;
    right: 0px;
    width: 206px;
    padding: 0;
    font-size: 0.6875em;
}

p {
    width:1000px;
}

Но код JavaScript немного модифицирован:

$(window).scroll(function(event) {
    $("#sticky").css("margin-top", 0-$(document).scrollTop());
});

С другой стороны, это можно сделать без JavaScript, как предложил Аарон. Вы можете увидеть эффект здесь .

Надеюсь, это сработает.

Answer 2

Вы можете использовать z-index, чтобы при позиционировании ваш относительно позиционированный контент перекрывал фиксированный контент, как показано в следующем примере: http://jsfiddle.net/R4jEj/.

Answer 3

Вам понадобится комбинация CSS + jQuery для достижения этой цели.Мой ответ был вдохновлен этот вопрос , который делает точную противоположность.

http://jsfiddle.net/hEvSu/

JS:

$(document).ready(function () {
    var o = $("#sticky").offset(); 
    s = o.left;
}); 
$(window).scroll(function () {
    $("#sticky").offset({ left: s - $(window).scrollLeft() }); 
}); 

CSS:

#sticky {
    background:red;
    position: fixed;
    bottom: 35px;
    right: 0px;
    width: 206px;
}

p {
    width:1000px;
}

Answer 4

Попробуйте это

<div id="header">
<div id="right">
    <div class="link">test</div>
</div>

    <div id="container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam erat nulla, rhoncus vel vestibulum a, adipiscing et eros. Curabitur nibh est, mattis ac euismod quis, dapibus vitae mauris. Nam scelerisque augue sit amet justo vulputate laoreet. Nulla eu est metus. Nulla tristique, lorem sit amet lobortis sodales, purus felis congue mi, id auctor ligula urna ac massa. Praesent venenatis vulputate porttitor. Fusce eget justo dolor. Praesent vel ipsum id metus bibendum porta. Nunc gravida, tortor non tincidunt posuere, ante turpis bibendum nulla, sed ultricies sem felis et arcu. Maecenas faucibus lectus sed nibh tincidunt sed vulputate massa tristique. Curabitur pulvinar, ante a luctus ornare, ipsum massa faucibus tellus, et faucibus odio orci sed arcu. Suspendisse tincidunt rutrum lorem malesuada viverra. Duis eleifend lobortis augue, ut gravida odio scelerisque ac. Phasellus bibendum hendrerit eros, nec adipiscing neque dignissim ut.
 <br/><br/>
Praesent dictum hendrerit felis quis porttitor. Duis at tortor eu nibh cursus pretium in vitae libero. Maecenas pellentesque orci non urna facilisis id interdum massa aliquet. Etiam dictum, orci non egestas eleifend, nulla tortor tristique turpis, ut porttitor elit ante in est. Ut pretium urna at lacus auctor convallis. Curabitur mi risus, euismod nec pharetra et, viverra dictum justo. Phasellus accumsan luctus libero, nec sollicitudin augue tristique non. Vivamus vulputate metus quis arcu varius ac aliquet libero elementum. Suspendisse consequat feugiat lacus ut pellentesque.
 <br/><br/>
Proin lacus lorem, rhoncus sit amet tincidunt semper, convallis eu quam. Sed bibendum rutrum velit, imperdiet ultrices odio condimentum a. Donec ac justo turpis, quis laoreet massa. Phasellus eu massa nisl, et laoreet quam. Suspendisse potenti. Maecenas odio risus, euismod interdum egestas vel, interdum non diam. Nunc luctus adipiscing orci pulvinar gravida. Quisque dapibus enim in mauris imperdiet vel vehicula lorem imperdiet. Aenean vel ligula libero. Maecenas sit amet tortor eu dolor rutrum hendrerit at a orci. Aliquam erat volutpat. Vestibulum eu vehicula est. Vestibulum non metus quam, eu molestie magna. Duis venenatis malesuada tincidunt.
 <br/><br/>
Nam sed metus lacus. Sed ac sapien tellus. Maecenas eleifend sodales diam sit amet aliquam. Quisque libero justo, egestas at scelerisque nec, dictum et libero. Quisque sollicitudin, dui sed lobortis viverra, risus ante condimentum urna, hendrerit varius augue tellus non purus. Maecenas id erat lorem, vel mattis mauris. Morbi sed elit ut metus laoreet congue. Phasellus ac urna diam. Duis faucibus varius magna, eu lacinia nisl tempor id. Ut facilisis quam et augue consectetur at vestibulum risus imperdiet. Curabitur sed tellus ante, et ultrices diam. Duis sem leo, venenatis quis ornare in, viverra et enim.
    <br/><br/>
Proin mattis molestie molestie. Suspendisse potenti. Nam luctus, urna in laoreet volutpat, nisi orci mattis nisl, sed pretium massa ligula sit amet elit. Nam quis tellus mi. Donec hendrerit justo sit amet est aliquet adipiscing. Fusce et urna eros. Nulla non magna arcu, sed tristique eros. Nunc id velit felis. Praesent nec lorem purus. Cras a sapien ipsum. Sed placerat suscipit leo vitae mollis. Nam sit amet ligula nisl, ac egestas ante. Maecenas libero est, porttitor in molestie vitae, auctor sit amet orci. Maecenas fermentum molestie tellus, quis facilisis est mattis et. Vestibulum ligula metus, iaculis vitae posuere at, mollis a eros.
         <br/><br/>
Proin mattis molestie molestie. Suspendisse potenti. Nam luctus, urna in laoreet volutpat, nisi orci mattis nisl, sed pretium massa ligula sit amet elit. Nam quis tellus mi. Donec hendrerit justo sit amet est aliquet adipiscing. Fusce et urna eros. Nulla non magna arcu, sed tristique eros. Nunc id velit felis. Praesent nec lorem purus. Cras a sapien ipsum. Sed placerat suscipit leo vitae mollis. Nam sit amet ligula nisl, ac egestas ante. Maecenas libero est, porttitor in molestie vitae, auctor sit amet orci. Maecenas fermentum molestie tellus, quis facilisis est mattis et. Vestibulum ligula metus, iaculis vitae posuere at, mollis a eros.
 <br/><br/>
Proin mattis molestie molestie. Suspendisse potenti. Nam luctus, urna in laoreet volutpat, nisi orci mattis nisl, sed pretium massa ligula sit amet elit. Nam quis tellus mi. Donec hendrerit justo sit amet est aliquet adipiscing. Fusce et urna eros. Nulla non magna arcu, sed tristique eros. Nunc id velit felis. Praesent nec lorem purus. Cras a sapien ipsum. Sed placerat suscipit leo vitae mollis. Nam sit amet ligula nisl, ac egestas ante. Maecenas libero est, porttitor in molestie vitae, auctor sit amet orci. Maecenas fermentum molestie tellus, quis facilisis est mattis et. Vestibulum ligula metus, iaculis vitae posuere at, mollis a eros.
         <br/><br/>
Proin mattis molestie molestie. Suspendisse potenti. Nam luctus, urna in laoreet volutpat, nisi orci mattis nisl, sed pretium massa ligula sit amet elit. Nam quis tellus mi. Donec hendrerit justo sit amet est aliquet adipiscing. Fusce et urna eros. Nulla non magna arcu, sed tristique eros. Nunc id velit felis. Praesent nec lorem purus. Cras a sapien ipsum. Sed placerat suscipit leo vitae mollis. Nam sit amet ligula nisl, ac egestas ante. Maecenas libero est, porttitor in molestie vitae, auctor sit amet orci. Maecenas fermentum molestie tellus, quis facilisis est mattis et. Vestibulum ligula metus, iaculis vitae posuere at, mollis a eros.
         <br/><br/>
Proin mattis molestie molestie. Suspendisse potenti. Nam luctus, urna in laoreet volutpat, nisi orci mattis nisl, sed pretium massa ligula sit amet elit. Nam quis tellus mi. Donec hendrerit justo sit amet est aliquet adipiscing. Fusce et urna eros. Nulla non magna arcu, sed tristique eros. Nunc id velit felis. Praesent nec lorem purus. Cras a sapien ipsum. Sed placerat suscipit leo vitae mollis. Nam sit amet ligula nisl, ac egestas ante. Maecenas libero est, porttitor in molestie vitae, auctor sit amet orci. Maecenas fermentum molestie tellus, quis facilisis est mattis et. Vestibulum ligula metus, iaculis vitae posuere at, mollis a eros.
         <br/><br/>
Proin mattis molestie molestie. Suspendisse potenti. Nam luctus, urna in laoreet volutpat, nisi orci mattis nisl, sed pretium massa ligula sit amet elit. Nam quis tellus mi. Donec hendrerit justo sit amet est aliquet adipiscing. Fusce et urna eros. Nulla non magna arcu, sed tristique eros. Nunc id velit felis. Praesent nec lorem purus. Cras a sapien ipsum. Sed placerat suscipit leo vitae mollis. Nam sit amet ligula nisl, ac egestas ante. Maecenas libero est, porttitor in molestie vitae, auctor sit amet orci. Maecenas fermentum molestie tellus, quis facilisis est mattis et. Vestibulum ligula metus, iaculis vitae posuere at, mollis a eros.
         <br/><br/>
Proin mattis molestie molestie. Suspendisse potenti. Nam luctus, urna in laoreet volutpat, nisi orci mattis nisl, sed pretium massa ligula sit amet elit. Nam quis tellus mi. Donec hendrerit justo sit amet est aliquet adipiscing. Fusce et urna eros. Nulla non magna arcu, sed tristique eros. Nunc id velit felis. Praesent nec lorem purus. Cras a sapien ipsum. Sed placerat suscipit leo vitae mollis. Nam sit amet ligula nisl, ac egestas ante. Maecenas libero est, porttitor in molestie vitae, auctor sit amet orci. Maecenas fermentum molestie tellus, quis facilisis est mattis et. Vestibulum ligula metus, iaculis vitae posuere at, mollis a eros.

    </div>

CSS

    #header{    border: 1px solid black;background-color: #888888;
height: 30px;
position: fixed;
top: 0;
width: 100%;}

#right{position:relative;right:0;}
#container{margin-top:40px;  width: 2000px;}
.link{    border: 1px solid red;
color: yellow;
font-weight: bold;
padding: 1px;
position: absolute;
right: 3px;
top: 3px}

также проверьте этот код на скрипке http://jsfiddle.net/2MZwr/14/

Позвольте мнеЗнайте, если это не решит вашу проблему.

Answer 5

Может быть для этой страницы вы можете определить position:absolute вместо position:fixed.

Как это:

#fixed {
    position: absolute;
    height: 20px;
    padding: 5px;
    background-color: #333;
    color: #fff;
    right: 0;
    top:0;
}
#container {
    margin-top: 30px;
    padding: 5px;
}

http://jsfiddle.net/R4jEj/2/

Answer 6

Простой ответ: * "Чтобы не перемещать его при прокрутке, вам нужно определить вертикальное положение. ИСПРАВЛЕНО ожидает как горизонтальное, так и вертикальное позиционирование. Таким образом, у вас есть возможность перейти

position:fixed;
right:0;

top:0;

или

position:fixed;
right:0;

bottom:0;

Затем вам понадобится z-index, чтобы убедиться, что - когда вещи начинают перекрываться - правильный div / layer / независимо от того, что является самым верхним и, следовательно, видимым, скрывая нижний z-index под ним.

Альтернативный вариант компоновки ...

... будет давать родительскому контейнеру / элементу

position:relative;

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

position:absolute;
top:0;
left:0;

или любую позицию, которую вы хотите им дать.

Answer 7

Если вы можете немного изменить HTML, вы можете достичь желаемого эффекта, просто поместив верхние ссылки в первый div корневого уровня, и все остальное во второй div корневого уровня.

<html>
    <head>
        <style type="text/css">
            #foo{position: absolute; height: 20px; border:2px solid red; background: gray; top:0; right: 0;}
            #bar{overflow:auto; width:100%; margin-top:24px;}
        </style>
    </head>
    <body>
        <div id="foo">Links Links Links Links Links Links Links Links Links Links Links Links</div>
        <div id="bar"><img alt="The rest of the page goes here" src="https://www.google.com/images/nav_logo99.png" width="2000"></div>
    </body>
</html>

Answer 8

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

body   { position: relative; }

ul     { position: absolute;
         top: 20px;
         right: 0px;
         /* if you want the content to overlap everything, you should set the z-index */
         z-index: 1;
}

Причина, по которой ваша первая попытка с абсолютным позиционированием не удалась, возможно, в том, что вы не установили относительный элемент, в этом случае он будет относительно браузераокно.Так что, если вы прокрутите, ссылки будут двигаться;)