无语义网格和粘性导航答案

【问题标题】：Unsemantic grid and a sticky navigation无语义网格和粘性导航
【发布时间】：2016-02-16 04:18:39
【问题描述】：

我在我的网站上遇到了一个带有粘性导航菜单的问题。而且我的网站基于 Unsemantic。

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

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

大家有什么想法吗？

【问题讨论】：

【解决方案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%;
    }
}

就是这样。

【讨论】：