Question

我知道如何使用position:fixed;但我希望，如果页面滚过它，它会在顶部并且在正常状态下更低。

.menu {
    height: 30px;
    width: 100%;
    border-bottom: 1px solid black;
    position: fixed;
    top: 0px;
}

Answer 1

如果我理解正确，你想在滚动过去之后修改菜单吗？如果是这种情况，请参阅this question。

如果这对您不起作用，请考虑使用这样的代码，假设jQuery（实际上是Sprint但两者大致相同）：

var navigation = $('nav').item(0);
var navigationY = navigation.element.offsetTop;
var navClone = navigation.clone();

$(window).bind('scroll', function() {
    var scrollY = (window.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop) >>> 0;
    if(scrollY > navigationY) {
        if(!navClone.element.parentNode || navClone.element.parentNode.nodeType !== 1) {
            navigation.after(navClone);
            navigation.addClass('fixed');
        }
    } else if(navClone.element.parentNode) {
        navClone.remove();
        navigation.removeClass('fixed');
    }
});

我在最近的一个项目中使用过，所以只需将顶部的$('nav')更改为选择元素所需的内容，例如： $('.menu')。

将固定菜单定位到顶部

1 个答案: