粘性导航栏主菜单答案

【问题标题】：sticky Navbar main menu粘性导航栏主菜单
【发布时间】：2018-04-19 22:35:46
【问题描述】：

我尝试让我的主菜单具有粘性，这样当我滚动浏览网站时，导航栏始终位于屏幕顶部。

我用过：

nav.content{
    position:sticky;
    position:-webkit-sticky;
    top:0;
}

此代码似乎可以工作，但是我的网站是这样设置的：

<html>
    <head>
        ....
    </head>
    <body>
        <header>
            <div class="logo"></div>
            <nav class="content">
               ......
            </nav>
        </header>
        <section class="site-content">
            .....
        </section>
        <footer>
            ....
        </footer>
    </body>
</html>

我的问题是菜单会一直停留，直到标题消失，然后菜单消失，所以它不会出现在主要内容上。

我希望有人可以建议如何让菜单在网站的完整滚动中粘贴

【问题讨论】：

标签： css menu sticky

【解决方案1】：

使用固定定位

nav.content { 
     position:fixed;
     top:0;
     left:0;
     right:0;
     width:100%;
     z-index:100 }

您也可以使用Z-index，这样它就可以在您的所有其他内容之上。

【讨论】：

【解决方案2】：

将 CSS 更改为：

nav.content{
    position: fixed;
    top: 0;
    width: 100%;
}

注意class="site-content 行中有一个 " 错误

【讨论】：