Div，固定在底部，滚动到顶部

Question

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

主页菜单div上的

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

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

任何人都可以帮助我吗？

Answer 1

DEMO：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计算菜单顶部最初坐的位置，并将其与当前滚动位置进行比较。我们不仅仅计算菜单位置并存储它的原因是因为菜单可能会增长（菜单项可能会扩展），但更重要的是窗口大小可以更改。

Answer 2

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

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

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

您可以计算页面位置

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

即。当页面不在顶部时，将菜单移到顶部，否则，将菜单移回到底部。当菜单位于顶部时，请确保它仍处于“固定”状态，此时间位于顶部，其余内容将在其后面滚动。