jquery - Div，固定在底部，在滚动时固定在顶部

Question

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

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

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

谁能帮帮我？

Answer 1

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