粘性位置：标题在一段时间后滚动

Question

粘性位置：标题在一段时间后滚动

dan*_*996 4 html css scroll position sticky

在我的网站上，我已经将<nav>棒子固定在顶部，但是当我向下滚动时，它只会停留几秒钟/像素，然后它就会滚动离开，请参阅下面的代码片段并向下滚动。我希望nav在向下滚动时随时保持在顶部，除非<header>可见。

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Danis Website</title>
        <link href="reset.css" type="text/css" rel="stylesheet">
        <link href="style.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <div id="wrapper">
            <header>
                <h1>Danis Website</h1>
            </header>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="rezepte.html">Rezepte</a></li>
                    <li><a href="zutaten.html">Zutaten</a></li>   
                </ul>
            </nav>
            <main>
                Main Main Main<!-- In the code snippet below here are more lines of Text, here if have omitted the lines for better readability.

            </main>
            <footer>
                Footer
            </footer>
            </div>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

CSS

*{
    margin: 0;
    padding: 0;
}
body, html{
    height: 100%;
    width: 90%;
    margin: 0 auto;
    background-color: #aaa;
}


#wrapper{
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: fuchsia;
}

header{
    flex: 0 0 50px;
    background-color: #888;
    text-align: center;
    position: sticky;
    top: 100px;
}

nav{
    flex: 0 0 50px;
    background-color: dodgerblue;
}

nav ul {
    display: flex;
    list-style-type: none;
    background-color: dodgerblue;
    height: 100%;
}

nav ul li {
    flex: 1;
    text-align: center;
    padding: 10px;
    border-left: 2px solid #aaa;
}

nav ul li:first-child {
    border-left: 0;
}

nav ul li a{
    color: white;   
    text-decoration: none;
}

nav ul li:hover {
    background-color: #888;
}

main{
    flex: 1;
    background-color: #ddd;
}

footer{
    flex: 0 0 50px;
    background-color: #888;
}

#list{
    display: flex;
    flex-wrap: wrap;
}

#list-item{
    flex: 0 1 300px;
    display: flex;
    border: 1px solid dodgerblue;
    margin: 10px;
    padding: 10px;
}

#list-item-img{
    flex: 0 0 auto;
    margin-right: 5px;
}

#list-item-text{
    flex: 1;
    margin-left: 5px;
}

#list-item-text p {
    margin: 5px;
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html>
    <head>
        <title>Danis Website</title>
        <link href="reset.css" type="text/css" rel="stylesheet">
        <link href="style.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <div id="wrapper">
            <header>
                <h1>Danis Website</h1>
            </header>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="rezepte.html">Rezepte</a></li>
                    <li><a href="zutaten.html">Zutaten</a></li>   
                </ul>
            </nav>
            <main>
                Main Main Main<!-- In the code snippet below here are more lines of Text, here if have omitted the lines for better readability.

            </main>
            <footer>
                Footer
            </footer>
            </div>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

*{
    margin: 0;
    padding: 0;
}
body, html{
    height: 100%;
    width: 90%;
    margin: 0 auto;
    background-color: #aaa;
}


#wrapper{
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: fuchsia;
}

header{
    flex: 0 0 50px;
    background-color: #888;
    text-align: center;
    position: sticky;
    top: 100px;
}

nav{
    flex: 0 0 50px;
    background-color: dodgerblue;
}

nav ul {
    display: flex;
    list-style-type: none;
    background-color: dodgerblue;
    height: 100%;
}

nav ul li {
    flex: 1;
    text-align: center;
    padding: 10px;
    border-left: 2px solid #aaa;
}

nav ul li:first-child {
    border-left: 0;
}

nav ul li a{
    color: white;   
    text-decoration: none;
}

nav ul li:hover {
    background-color: #888;
}

main{
    flex: 1;
    background-color: #ddd;
}

footer{
    flex: 0 0 50px;
    background-color: #888;
}

#list{
    display: flex;
    flex-wrap: wrap;
}

#list-item{
    flex: 0 1 300px;
    display: flex;
    border: 1px solid dodgerblue;
    margin: 10px;
    padding: 10px;
}

#list-item-img{
    flex: 0 0 auto;
    margin-right: 5px;
}

#list-item-text{
    flex: 1;
    margin-left: 5px;
}

#list-item-text p {
    margin: 5px;
}

Run Code Online (Sandbox Code Playgroud)

编辑：我在 Arch Linux 上使用 Firefx 37.0.2

Answer 1

Dig*_*ble 10

我相信这可能是因为height: 100%你的body. 当您的内容太长时，body它不会环绕整个内容，而是仅继承浏览器视口高度。因此，当您滚动到底部时body，nav停止粘连。

附带说明一下，虽然我认为您现在不应该使用position: sticky。它的支持率低于浏览器 20%。http://caniuse.com/#feat=css-sticky

解决方案：替换height: 100%;为min-height: 100%;#wrapper。当仅删除height: 100%;页面小于内容未填充视口的页面上的视口时

归档时间：	10 年，6 月前
查看次数：	2276 次
最近记录：	5 年，1 月前