Question

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

Answer 1

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.