How can I stop my sliding div from overlapping my header?

Question

I have a site that I need to keep a menu present on the screen. My ideal solution is to have the menu slide down the page via jquery when the browser reaches the menu.

I have found the exact problem and solution on this site at http://stackoverflow.com/questions/225843/how-can-i-have-a-sliding-menu-div-that-doesnt-move-unless-the-page-is-scrolled-d but the final part of the solution, the part about if(offset is missing!

This missing code will solve my problem and if anyone can fill in the missing blanks for this code I would very much appreciate it!

Answer 1

I think it'll be something like

if(offset < menu_top_limit) {
    offset = menu_top_limit;
}

$("#menuID").animate({top:offset},{duration:500,queue:false});

You might wanna play with the animation a bit cos I nicked the answer from here.

I think the answer to the question you found was taken from someone who took it from this place and added in the code to leave a gap at the top of the page... Proper web development in action!!

Lemme know if you need any more info on what's going on with all this... Hope it works!

Answer 2

Thanks, Daddywoodland, I'm not quite sure if your fix worked but it certainly helped me get to where I wanted to be.

I have changed two things: 1) adding your code to the bottom of script and

2) changing the menuYloc = null to menuYloc = -400;

This has had the effect of the scroll starting when the top of the browser window reaches it and the -400 appears to keep the box at the top of my particular page. Code below:

var name    = "#leftmenu";

var menu_top_limit = 0; var menu_top_margin = 0; var menu_shift_duration = 500; var menuYloc = -400; ///////////////////////////////////

$(window).scroll(function() { // Calculate the top offset, adding a limit offset = menuYloc + $(document).scrollTop() + menu_top_margin;

if(offset < menu_top_limit) { offset = menu_top_limit; } $(name).animate({top:offset},{duration:500,queue:false});

 });