How can I have a sliding menu div that doesn't move unless the page is scrolled down past a certain point.

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

Trying to help clarify:

Are you looking for behavior like the iPhone apps, where a category heading scrolls with the page until it hits the top of the page where it then becomes fixed, unless it's replaced by the next category heading?

Answer 2

Slashdot does this. Check it out at, for example, http://tech.slashdot.org/tech/08/10/22/1246200.shtml

You may be able to lift the technique from their site.

Answer 3

http://www.javascript-fx.com/scriptclips/float/inview1.html

I found what I was looking for. Thanks.

Answer 4

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 

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

Answer 5

having a similar issue, but it looks like it is a case no one cares enough to solve / not a big issue; see many sites exhibit the issue.

Essentially my sliding div overlaps the footer if the browser window height is less than the height of the sliding div.

The Slashdot example, the sliding div overlaps the footer. Looks terrible, but i guess no one browsers with a window height of <200 haha.