Question

我创建了一个JSFiddle来显示我的网页结构HTML和CSS。

我一直在尝试构建一个页面，当滚动导航栏到页面顶部时，其余的阅读器消失，页面的其余部分滚动但是当我添加位置时：固定在.nav类上阻止背景颜色跨越页面的整个宽度并覆盖我的text-align：center。这是我的其余CSS：

.header {
    text-align: center;
}

.nav {
    position: fixed;
}

.nav ul {
    padding: 0;
    margin: 0;e
    list-style: none;
    /* display: block; */
    background-color: #eee;
}

.nav li {
    display: inline-block;
    padding: 0 10px;
}

我遇到了一些如何解决这个问题的例子，但很难理解如何将其应用到我的问题中。

你们有什么想法？

Answer 1

没有非常详细，here is a codepen for you。您需要将固定的定位和背景添加到父元素.header，而不是子元素。

以下是其他活动的一些可能的js：

jQuery(document).ready(function($) {
    var s = $("nav");
    var pos = s.position();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        if (windowpos >= pos.top) {
            s.addClass("stick");
            $('#rewrap').addClass("bump");
        } else {
            s.removeClass("stick"); 
            $('#rewrap').removeClass("bump");
        }
    });
});

Answer 2

绝对或固定定位元素的自动计算宽度计算为“缩小到适合”，这意味着它们只有内容所需的宽度。

因此使用left:0; right:0为您的导航提供明确的宽度，或者从两个“边”定位

。

（而你的text-align:center当然没有被“覆盖”，但是没有可见的效果 - 因为元素只有其内容的宽度必需的，然后就不再是“中心”......）

使用位置：固定导航无法按预期工作

2 个答案: