javascript - position:fixed floating menu confined to scroll position

Question

I've got a menu which I want to stay in the same position on the page with css:

position:fixed;
top: 0;

But I want the menu to not go outside of a certain area when the page scrolls. Please see this example (scroll the result window).

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

Can this be done with just CSS, or can someone suggest an elegant JS solution to this?

Many thanks.

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",
        }); 
    }
});

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

见小提琴：http: //jsfiddle.net/Fg2MA/3/