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

这是我的代码：

当我向下滚动时，黄色菜单会固定在页面顶部，当你向下滚动时，我相信你以前见过这种情况，比如：

我知道可以使标题一直固定，但是如何使它只在向下滚动到足以使其离开页面时才在那里。我猜它需要某种jquery魔法

HTML

测试
测试
菜单
1.

1

1

1

1

1

1

1

1

1

1

1

1

1

1

如果添加

位置：固定

到

#标题

，就像它将自动保持在顶部一样。如果头部不需要一直在顶部（比如当头部上方有东西可以从屏幕上滚动时），您可能需要一个脚本来添加或删除包含此css属性的类

另一个答案使用jQuery，这是它的非jQuery版本：

var select = document.querySelector('#select');
var initialPosition = select.offsetTop;
addEventListener('scroll', function (event) {
    if (window.scrollY > initialPosition) {
        select.classList.add('fixed');
    } else if (select.classList.contains('fixed')) {
        select.classList.remove('fixed');
    }
});

当然，还要将类添加到样式表中：

.fixed {
    position:fixed;
    top:0;
}

下面是一个演示工作脚本的示例

您可以使用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，正文{
身高：100%；
宽度：100%/*
// 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');
    }
});

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) */
}