javascript - 位置 :fixed floating menu confined to scroll position

Question

我有一个菜单，我想使用 css 将其保留在页面上的相同位置:

position:fixed;
top: 0;

但我希望菜单在页面滚动时不会超出某个区域。请查看此示例(滚动结果窗口)。

http://jsfiddle.net/Fg2MA/1/

这可以只用 CSS 来完成吗，或者有人可以建议一个优雅的 JS 解决方案吗？

非常感谢。

Answer 1

我认为如果没有 java 脚本(或者可能是非常棘手的 css 技巧？)，它就无法工作，但是如果您可以选择使用 JQuery，解决方案非常简单，只需执行以下操作:

$(document).on('scroll', function () {
    if ($(document).scrollTop() > ($("#container")[0].offsetTop + $("#container").height())) {
        $("#menu").css({
            display: "none",
        });
    }
    else {
       $("#menu").css({
            display: "block",
        }); 
    }
});

在条件中，它检查实际滚动位置是否在容器的开头下方。如果是，则将 #menu 的 css 更改为 display: none; 否则为 display: block;

参见 fiddle :http://jsfiddle.net/Fg2MA/3/