ansaurus

Question

jquery - How to make an element follow the page to a point ?

Answer 1

+2 A:

This is how I accomplished this on a client site:

JavaScript (using jQuery):

if( !$.browser.msie || ($.browser.msie && $.browser.version > 6) ){
    $('body').append('<div id="listener" rel="generated">&nbsp;</div>');
    $(window).scroll(function () { 
     if($('#listener').offset().top > 150){
      $('body:not(.fixmenu)').addClass('fixmenu');
     }else{
      $('body.fixmenu').removeClass('fixmenu');
     }
    });
}

CSS:

#listener{
    position: fixed;
    top: 0;
    right: 0;
    height: 1px;
    width: 1px;
}
#page #submenu{
    position: absolute;
    top: 85px;
    z-index: 3;
}
.fixmenu #submenu{ position: fixed; }

The technique: dynamically generate an invisible "listener" div with fixed positioning in the top right corner of the page. When that listener is 150 pixels (or insert your arbitrary number here) or more from the top of the page, add the "fixmenu" class to the <body>. From here, use CSS to change the positioning of the menu from absolute to fixed.

Since IE6 does not support fixed positioning, I chose to exclude it.

cpharmston 2009-07-28 12:21:11

Great stuff, many thanks!

stukerr 2009-07-28 12:55:11

Worth noting: since I wrote this code, jQuery deprecated $.browser. You may want to look into $.support as an alternative.

cpharmston 2009-07-28 14:44:17

ansaurus

tags:

views:

answers:

jquery - How to make an element follow the page to a point ?

related questions