将固定菜单置于顶部答案

【问题标题】：Position fixed menu to top将固定菜单置于顶部
【发布时间】：2012-01-07 01:16:42
【问题描述】：

我知道如何使用position:fixed;，但如果页面滚动到它上面，我希望它位于顶部，正常状态下位于下方。

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

【问题讨论】：

请发布您正在使用的代码。
.menu { 高度：30px;宽度：100%；边框底部：1px 纯黑色；位置：固定；顶部：0px； }
而且它必须在顶部的 300px 处，但是当页面越过菜单时它必须停留在顶部的 0px 处。
如果可以的话，请发布其余的内容......你没有给我们任何可以使用的东西。

标签： css

【解决方案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').

【讨论】：