Natedesigns





Moving Navigation with Scroll

For an improve UX, the user is presented constantly with the menu on scrolling down the page. At the top it’s positioned where you want it, then on scrolling past a certain point, this time I’m using .banner as a waypoint.

//Store a variable on where you want the item to change it's positioning?
var fixItem = $('.banner')

			var posi = $(fixItem).offset();
                        //log the offset
			
			$(window).scroll(function() {
                        //when the window scrolls
				if($(this).scrollTop() > posi.top && $(fixItem.css('position') == 'static')){ 
                                        //if item was static and scrollTop is great that poisition top.
					$('#navigation ul').css({
						position:'fixed',
						margin:'0px 0px 0px 0px',
						padding:'10px 10px 0px 0px'
					});
                                        //add this css
				} else if( $(this).scrollTop() <= posi.top && $(fixItem.css('position') == 'fixed')){ 
                                       //else if you're scrolling back up
					$('#navigation ul').css({
						position:'static',
						margin:'40px 10px 0px 0px',
						padding:'0px'
					});
                                        //add this css.
				}
			});