javascript - 滚动上的停靠菜单 - 可能需要 JavaScript

Question

这是我的代码:http://jsfiddle.net/spadez/usbs2/19/

我正在努力做到这一点，当我向下滚动时，当你从它向下滚动时，黄色菜单会停靠在页面顶部，我相信你以前见过这种东西，像这样:

http://css-tricks.com/examples/PersistantHeaders/

我知道可以让页眉始终停靠，但如何才能做到只有当向下滚动到足以使其离开页面时它才会出现。我猜它需要某种 jquery 魔法？

HTML

<div id="main">
    <div id="header">test</div>
    <div id="jumbo">test</div>
    <div id="select">menu</div>
    <div id="features">1
        <br />1
        <br />1
        <br />1
        <br />1
        <br />1
        <br />1
        <br />1
        <br />1
        <br />1
        <br />1
        <br />1
        <br />1
        <br />1
        <br />1
        <br />
    </div>
</div>

Answer 1

Demo Fiddle

你可以使用 jQuery，稍微改变你的 CSS:

// get initial top position of menu
var init = $('#select').offset().top;
// listen to window scroll event
$(window).scroll(function () {
    // if top of window scrolled past top of menu
    if ($(window).scrollTop() > init) {
        // fix the menu to the top of the page
        $('#select').css({
            top: 0,
            position: 'fixed'
        });
    } else {
        // otherwise put it back in its regular position
        $('#select').css('position','relative');
    }
});

CSS

html, body {
    height: 100%;
    width:100%; /* <-- defined default width */
    margin: 0;
    padding: 0;
}
#main {
    height: 100%;
    width: 100%;
}
#header {
    height: 60px;
    background: pink;
    float: left;
    width: 100%;
}
#jumbo {
    height: 100%;
    background: blue;
}
#select {
    height: 60px;
    background-color:yellow;
    width:100%; /* <-- set width (relative to body) */
}