位置：固定的浮动菜单仅限于滚动位置

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/