使用位置：修復了導航功能無法按預期運行的問題

Question

我創建了一個JSFiddle以顯示我的網頁結構HTML和CSS。

http://jsfiddle.net/du7NN/

我一直在嘗試構建一個頁面，在該頁面上，滾動導航時會停留在頁面頂部，而其余的閱讀器會消失，而頁面的其余部分會滾動，但是當我添加位置時：固定在.nav類上會停止背景-color跨越頁面的整個寬度，並覆蓋我的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

無需太詳細， 這里是一個Codepen 。 您需要將固定的位置和背景添加到父元素.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從兩側“定位” left:0; right:0 left:0; right:0 。

（而且您的text-align:center當然不是“覆蓋”的，但是沒有可見的效果– 因為該元素僅是其所需內容的寬度，然后“ center” 就沒有更多了……）