3

我需要在我的网站上为菜单实现一些有趣的行为。

在主页上的菜单 div 必须固定在窗口的底部，当用户向下滚动时 - 菜单会向上并保持固定在窗口的顶部。并且当用户滚动回顶部时 - 菜单会下降并保持固定在底部。

不幸的是，我不知道该怎么做。

谁能帮我？

4

2 回答 2

3

演示：http: //jsfiddle.net/M3KLB/1/

HTML

<ul id="menu" class="bottom">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
</ul>

CSS

#menu {
    left: 0;
    background-color: red;
    width: 100px;
}
    #menu.bottom {
        position: absolute;
        bottom: 0;
    }
    #menu.top {
        position: fixed;
        top: 0;
    }

jQuery

var menu = $('#menu');

$(document).scroll(function () {
    if ($(this).scrollTop() >= $(window).height() - menu.height()) {
        menu.removeClass('bottom').addClass('top');
    }
    else {
        menu.removeClass('top').addClass('bottom');
    }
});

这里的想法是，最初我们想要相对于窗口定位菜单。一旦我们“滚动过去”它，我们应该将位置设置为固定。

因为我们无法使用 JS删除特定样式 - 例如top无法删除 - 我们最好使用两个不同的类来实现它。这样就可以移除该属性并且不会干扰我们的新样式。

JS 计算菜单顶部最初所在的位置，并将其与当前滚动位置进行比较。我们不只计算一次菜单位置并存储它的原因是因为菜单可以增长（可能是菜单项扩展），但更重要的是可以更改窗口大小。

于 2013-09-19T07:51:20.323 回答
2

基本上，菜单上的“固定”位置 - 固定在底部。

然后放入一个检测窗口何时滚动的处理程序

$(window).scroll(function(){
    do stuff . . .
});

您可以计算出页面位置

if( pagePosVar != 0){
    do animate . . . (menu to top)
}else{
    do animate . . . (menu to bottom)
}

即当页面不在顶部时，将菜单移至顶部，否则将菜单移回底部。当菜单在顶部时，确保它仍然是“固定的”，这次到顶部，其余内容将滚动到它后面。

于 2013-09-19T07:41:14.687 回答