Keep Side Navigation Fixed with Scrolling of page

Question

Hi Guys, I have a clients website - www.stagecraft.co.uk and they want the navigation on the hire pages (longer page) to still be there at when you scroll the page down. I've had a quick go (not live) with position fixed but in doing so it the leftside navigation is about 200px or so from the top of the window. Any when to get it at the top of the window when scrolling?

Thanks in advance....

Answer 1

Hello

$(window).scroll(function() {
    $('#myElement').css('top', $(this).scrollTop() + "px");
});

I got this from question 257250

http://stackoverflow.com/questions/257250/what-is-the-simplest-jquery-way-to-have-a-positionfixed-always-at-top-div

Answer 2

I would hesitate to use only jquery - I think it's really annoying when scrolling a page and a DIV "jumps" due to javascript updating the position of an element.

I'd use position:fixed, and just move the position of the box to the top of the left side with javascript when scrolling down initially, and then leave it there. It's a sort of compromise.

Answer 3

You could make it position fixed, only when scrolling has reached a certain point:

$(window).scroll(function() {
    if ($(this).scrollTop() > 200) { //I just used 200 for testing
        $("#tester").css({ "position": "fixed", "top": 0 });
    } else {
        $("#tester").css({ "position": "absolute", "top": "200px" }); //same here
    }      
});

and the CSS for the div is as following:

#tester {
 position: absolute;
 right: 20px;
 top: 200px;
 height: 200px;
 width: 100px;
 background: red;
}