Question

I have a menu div that I want to slide down so it’s always visible, but I want it to be positioned under my title div. I don’t want it to move until the top of the menu hits the top of the screen and then stay in place. Basically I want a sliding menu with a maximum height it can slide to.

Answer 1

I think I understand what you’re talking about—we used a similar technique on The King with jQuery. Here’s how:

///// CONFIGURATION VARIABLES:  var name                = '#rightsidebar'; var menu_top_limit      = 241; var menu_top_margin     = 20; var menu_shift_duration = 500; var menuYloc = null; ///////////////////////////////////  $(window).scroll(function()  {      // Calculate the top offset, adding a limit     offset = menuYloc + $(document).scrollTop() + menu_top_margin;      // Limit the offset to 241 pixels...     // This keeps the menu out of our header area:     if(offset < menu_top_limit)         offset = menu_top_limit;      // Give it the PX for pixels:     offset += 'px';      // Animate:     $(name).animate({top:offset},{duration:menu_shift_duration,queue:false}); }); 

(Hat tip to @soyrex who wrote this code.)