15

I asked this question which worked great for making text (top links) forced to the right after scrolling.

The issue is one on the page, when I scroll vertically, the top links stay on the top of the page even when I scroll down so they show above my main content.

What is a way to force text to be forced to the right but don't move when I scroll vertically?

Here is my CSS today:

#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;
}
Community
  • 1
  • 1
leora
  • 188,729
  • 360
  • 878
  • 1,366
  • see here: http://stackoverflow.com/questions/4819828/can-i-use-position-fixed-vertically-and-and-position-absolute-horizontally – ptriek Dec 21 '11 at 14:09
  • @ptriek - this seems to be the opposite of what i want. I want it to always align to the right (regardless of scrolling) but stay at the top of the page (and not move when i scroll down). To be clear, when i scroll down the should not be seen – leora Dec 21 '11 at 15:04
  • @leora: I am trying to understand your issue better. What did you mean by "force text to be forced to the right but don't move when I scroll vertically"? – moey Dec 27 '11 at 06:39

8 Answers8

9

I think you want something like this. Correct me if I am wrong. I edited ptriek's code and fixed it so that the sticky thing doesn't move if the page is vertically scrolled but moves with the page keeping its position fixed if the page is horizontally scrolled.

The CSS code is the same:

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

p {
    width:1000px;
}

But the JavaScript code is slightly modified:

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

Alternately, this can be done without JavaScript as Aaron has suggested. You can see the effect here.

I hope it works.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Sajib Mahmood
  • 3,382
  • 3
  • 37
  • 50
5

You can use z-index to make your relatively-positioned content overlay your fixed content when scrolled, as per this example: http://jsfiddle.net/R4jEj/.

Aaron
  • 5,137
  • 1
  • 18
  • 20
3

You'll need a combination of CSS + jQuery to achieve this. My answer was inspired by this question, which does the exact oposite.

http://jsfiddle.net/hEvSu/

The JS:

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

The CSS:

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

p {
    width:1000px;
}
Community
  • 1
  • 1
ptriek
  • 9,040
  • 5
  • 31
  • 29
  • what doesn't make sense to me is that i have another site that this works fine . .using firebug i can't see any css differences and there is definatley no explicit javascript doing this . . im a bit puzzled . . – leora Dec 21 '11 at 18:28
  • its an internal site . . i will try to reproduce this from scratch and see if i can highlight what is causing it to work . . – leora Dec 21 '11 at 19:15
2

May be for that page you can define position:absolute instead of position:fixed.

Like this:

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

sandeep
  • 91,313
  • 23
  • 137
  • 155
  • if i make it absolute then when i scroll horizontally it doesn't stay on the right of the browser window – leora Dec 27 '11 at 13:34
2

Try this

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

check this code at fiddle also http://jsfiddle.net/2MZwr/14/

Let me know if this is not fix your problem.

Gurvinder
  • 760
  • 2
  • 8
  • 16
0

I think you should use position: absolute instead of fixed. Note that the positioning will be relative to the first element that you have given a position:relative. So you could write:

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

The reason that your first try with absolute positioning didn't work out is probably because you didn't set a relative element, in wich case it will be relative to the browser window. So if you scroll, the links will move;)

Stefan Hagen
  • 658
  • 3
  • 11
  • 25
0

If you can alter the HTML a bit, you can achieve the desired effect by simply putting the top links in the first root-level div, and everything else in the second root-level 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>
Umbrella
  • 4,733
  • 2
  • 22
  • 31
0

Simple answer: *"To not make it move around when scrolling, you need to define the vertical position. FIXED expects both horizontal as well as vertical positioning. So you have the option to go

position:fixed;
right:0;

top:0;

or

position:fixed;
right:0;

bottom:0;

Then, you'll need z-index to make sure that - when things start overlapping - the correct div/layer/whatever is the topmost and therefore the visible one, hiding the lower z-index underneath it.

An alternative layout option...

... would be to give the parent container/element a

position:relative;

and then position the child elements as you like using

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

or whatever position you want to give them.