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

我有一个菜单，我想用css保持在页面上的相同位置：

position:fixed;
top: 0;

但是当页面滚动时，我希望菜单不要超出某个区域。请参见此示例（滚动结果窗口）

这可以用CSS来完成吗，或者有人能推荐一个优雅的JS解决方案来解决这个问题吗

---

非常感谢。

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

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

在这种情况下，它会检查实际滚动位置是否在容器的开头下方。如果是，则

#菜单

的css更改为

显示：无否则显示为
块

看小提琴：
那么，你想做什么？它不应该走出哪个区域？它要么是固定的，要么不是……我希望它留在绿色容器内，但如果页面顶部在绿色容器内，我希望它固定在页面顶部（如果有意义的话）。