Question

我试图让我的主菜单变得粘稠，这样当我滚动浏览网站时，导航栏就会一直位于屏幕的顶部。

我用过：

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>

我的问题是菜单一直存在，直到标题不在视线范围内，然后菜单消失，所以它不会落到主要内容上。

我希望有人可以建议如何通过整个网站滚动菜单

Answer 1

使用固定定位

xs:maxLength

您也可以使用nav.content { position:fixed; top:0; left:0; right:0; width:100%; z-index:100 }，以便它始终位于您的所有其他内容之上。

Answer 2

将CSS更改为：

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

注意那里有一个＆＃34; class="site-content行

中的错误

粘性Navbar主菜单

2 个答案: