12

I am messing around with some jquery trying to get to grips with it.

I have a ul nav which has a absolute position set but after I scroll the page down by 200 pixels i would like that to switch to position fixed so that the nav always stays on the page.

How would I do this?

below is the example I am working on

http://satbulsara.com/tests/

3
  • why not use by default the position:fixed?
    – Sotiris
    Feb 5, 2011 at 16:01
  • Set the poition to "fixed" instead of "absolute".
    – Neil
    Feb 5, 2011 at 16:03
  • ok but I would like the nav to scroll down to a point and then switch to fixed after, how can I get jquery to do that?
    – sat
    Feb 5, 2011 at 16:34

3 Answers 3

13

Thanks to everyone for being so quick to help

this is what i wanted

$(document).ready(function() {
    var theLoc = $('ul').position().top;
    $(window).scroll(function() {
        if(theLoc >= $(window).scrollTop()) {
            if($('ul').hasClass('fixed')) {
                $('ul').removeClass('fixed');
            }
        } else { 
            if(!$('ul').hasClass('fixed')) {
                $('ul').addClass('fixed');
            }
        }
    });
});

Thanks!!!!!

5

I wrote this jQuery plugin to do just that.

1
  • Neat! I'll definitely look at using that in my next projects, if I may :-)
    – Bojangles
    Feb 5, 2011 at 20:16
2

Here is the code I use to create a "sticky" sidebar. You'll need to modify the IDs to suit your markup.

var sidebarScrollTop = 0;

$(document).ready(function() {
    sidebarScrollTop = $("#sidebar").offset();

    $(window).scroll(function () { 
        var docScrollTop = $('body,html').scrollTop();

        if(docScrollTop > sidebarScrollTop.top) {
            $("#sidebar").css({ position: 'fixed', top: '0px' });
        } else {
            $("#sidebar").css({ position: 'static' });
        }
    });
});

$(window).resize(function() {
    sidebarScrollTop = $("#sidebar").offset().top;
});

$(document).resize(function() {
    sidebarScrollTop = $("#sidebar").offset().top;
});

Basically, all you need to do is change the #sidebar for the ID of the sidebar container. This code will see if the sidebar element is scrolled past the top of the screen. If it is, it changes it's position to fixed, and when it returns to being on the page again, the position is returned to static (default).

The $(document).resize() and $(window).resize() functions will make sure the sidebar stays stick at the top of the page when the document/window is resized respectively. The document function will ensure the sidebar works properly even if you have jQuery animations changing the size of elements.

3
  • Thanks James thats almost what I am looking for, i would like to be able to scroll the nav up a bit and then have it stick + this one seems to flash when i scroll up and down
    – sat
    Feb 5, 2011 at 16:43
  • thanks james for pointing me in the right way but this is what i was looking for exactly
    – sat
    Feb 5, 2011 at 17:18
  • @sat - I use it on a site I'm developing and it works fine. If it flickers, maybe try putting the sidebar inside a div container.
    – Bojangles
    Feb 5, 2011 at 20:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.