0

Hi I have a menu that I would like to manipulate with some JS...I want the menu to be in a set spot when the page loads, but when the user scrolls down the page I would like the menu to move to a fixed position at the top of the window. 

<div id="div_header">
    <img src="images/logo.png" height="72px" class="logo" />
</div>

<div id="mainMenu">
<ul>
    <li>
        <a class="menuItem">Link</a>
    </li>
    <li>
        <a class="menuItem">Link</a>
    </li>
</ul>


#div_header {
background:url("../images/top-header.png") repeat-x scroll 0 0 transparent;
height:80px;
margin:0 0 10px;
position:relative;
z-index:3;
}

div#mainMenu {
position:relative;
text-align:center;
top:-16px;
z-index:2;
background:url(../images/bg_menu.png) repeat-x;
width:100%;
height:41px;
}

Thanks for any help...

webwrks
  • 11,158
  • 5
  • 24
  • 21

1 Answers1

0

use position:fixed; in css (but as I know for IE6, 7 it not works correctly).

Otherwise take a look on this post on stackoverflow

update

$(window).scroll(function() {
    if ($(this).scrollTop() > $('#div_header').height()) {
        $('#mainMenu').css('top', $(this).scrollTop() + "px");
    }
    else {
        $('#mainMenu').css('top', $('#div_header').height() + "px");
    }
});

this code probably need some polishing but it's just an idea

Community
  • 1
  • 1
Samich
  • 29,157
  • 6
  • 68
  • 77
  • yes I am aware of the fixed property, but I can't use it because my menu would not be in the right spot, there would be a 'hole' on top of the menu where the header went before... – webwrks Sep 06 '11 at 09:21
  • So you will need to handle it manually on `scroll` event. check the post I referenced. I've updated the sample. – Samich Sep 06 '11 at 09:35