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;

请参阅小提琴：http://jsfiddle.net/Fg2MA/3/

位置：固定浮动菜单限制在滚动位置

1 个答案: