非语义网格和粘性导航

Question

我的网站上有一个粘性导航菜单的问题。我把这个网站建立在Unsemantic上。

https://dl.dropboxusercontent.com/u/7468425/acappella/site/index.html

正如您所看到的，如果您查看该网站 - 当您滚动浏览时，菜单会粘在顶部。但是 - 这是我的问题 - 同时它变得更宽。而不是容器的 100% 宽度，而是窗口的 100% 宽度。

我希望它始终保持相同的宽度，以便它顺利地继续跟随。

你们中有人有什么想法吗？

Answer 1

然后将其设置为容器的宽度。（又称 1200 像素）

.sticky {
    position: fixed;
    top: 0; 
    left:50%;
    margin: 0 0 0 -600px;
    width: 1200px;
}

当您达到 1200 像素时，请使用媒体查询：

@media screen and (max-width: 1200px){
    .sticky {
        left:0;
        margin: 0;
        width: 100%;
    }
}

就这样。