Question

嗨我有一个菜单，我想用一些JS操作...我希望菜单在页面加载时处于设定点，但当用户向下滚动页面时我希望菜单移动到窗口顶部的固定位置。

<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;
}

感谢您的帮助......

Answer 1

在css中使用position:fixed;（但据我所知，对于IE6,7它无法正常工作）。

否则请查看stackoverflow上的this post

<强>更新

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

这段代码可能需要一些抛光，但这只是一个想法

jQuery滚动/菜单问题

1 个答案: