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

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

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

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

Вот мой 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;
}

ОТВЕТЫ

Ответ 1

Я думаю, вам нужно что-то вроде this. Поправьте меня, если я ошибаюсь. Я отредактировал код 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, как предложил Аарон. Вы можете увидеть эффект здесь.

Я надеюсь, что это сработает.

Ответ 2

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

Ответ 3

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

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;
}

Ответ 4

Может быть, для этой страницы вы можете определить 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/

Ответ 5

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

<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/

Сообщите мне, если это не исправить вашу проблему.

Ответ 6

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

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;
}

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

Ответ 7

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

<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>

Ответ 8

Простой ответ: * "Чтобы не перемещаться при прокрутке, вам нужно определить вертикальное положение. FIXED ожидает как горизонтального, так и вертикального позиционирования. Таким образом, вы можете перейти

position:fixed;
right:0;

top:0;

или

position:fixed;
right:0;

bottom:0;

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

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

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

position:relative;

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

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

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