為什么 position:sticky 不影響我的導航欄？
[英]Why isn't position: sticky affecting my navbar?
問題描述
父元素沒有溢出屬性。 父元素有一個設定的高度。 無論我嘗試什么，導航欄都不會粘住。 它也不適用於 JavaScript。 我一定是錯過了什么。 下面是代碼。 有人請告訴我我做錯了什么：
/* Body */ body{ margin: 0; position: relative; height: 100%; } /* Header */ .header{ font-family: sans-serif; font-weight: 900; background-color: #04042b; color: #de215a; text-align: center; font-size: 200%; width: 100%; } .header h1{ margin: 0; line-height: 1; padding-top: 4%; padding-bottom: 4%; } /* Navigation Bar */ .navbar{ background-color: #000005; position: sticky; top: 0; overflow: hidden; } .navbar a{ float: left; color: #FFFFE0; text-align: center; text-decoration: none; font-size: 130%; padding: 2%; } .navbar a:hover{ background-color:#E6E6FA ; color: black; } .navbar a.active{ background-color: #4682B4; color: white; } article img{ height: 100% }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="refresh" content="30"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Stuff</title> <link rel="stylesheet" type="text/css" href="Mainsheet.css"> <script src="Mainscript.js"type="application/javascript" ></script> </head> <body> <header> <div class="header"> <h1>Stuff</h1> </div> </header> <nav> <div class="navbar"> <a class="active" href="">Home</a> <a href="">Projects</a> <a href="">News</a> <a href="">About</a> <a href="">Forum</a> <a href="">Contact</a> <a href="">Funding&FAQ </a> </div> </nav> <article> <h3>Sticky Navigation Example</h3> <p>The navbar will stick to the top when you reach its scroll position.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> </article> </body> </html>
3 個解決方案
解決方案1
3 2018-03-21 18:51:53
嘗試將.navbar的樣式移動到父nav根級別元素（因此它會粘在父body ）。
nav {
background-color: #000005;
position: sticky;
top: 0;
overflow: hidden;
}
/* Body */ body{ margin: 0; position: relative; height: 100%; } /* Header */ .header{ font-family: sans-serif; font-weight: 900; background-color: #04042b; color: #de215a; text-align: center; font-size: 200%; width: 100%; } .header h1{ margin: 0; line-height: 1; padding-top: 4%; padding-bottom: 4%; } /* Navigation Bar */ nav{ background-color: #000005; position: sticky; top: 0; overflow: hidden; } .navbar a{ float: left; color: #FFFFE0; text-align: center; text-decoration: none; font-size: 130%; padding: 2%; } .navbar a:hover{ background-color:#E6E6FA ; color: black; } .navbar a.active{ background-color: #4682B4; color: white; } article img{ height: 100% }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="refresh" content="30"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Stuff</title> <link rel="stylesheet" type="text/css" href="Mainsheet.css"> <script src="Mainscript.js"type="application/javascript" ></script> </head> <body> <header> <div class="header"> <h1>Stuff</h1> </div> </header> <nav> <div class="navbar"> <a class="active" href="">Home</a> <a href="">Projects</a> <a href="">News</a> <a href="">About</a> <a href="">Forum</a> <a href="">Contact</a> <a href="">Funding&FAQ </a> </div> </nav> <article> <h3>Sticky Navigation Example</h3> <p>The navbar will stick to the top when you reach its scroll position.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> </article> </body> </html>
解決方案2
3 2018-03-21 18:53:01
位置sticky取決於父容器。 在您的navbar nav移動nav 。
<body>
<header>
<div class="header">
<h1>Stuff</h1>
</div>
</header>
<div class="navbar">
<nav>
<a class="active" href="">Home</a>
<a href="">Projects</a>
</nav>
</div>
...
解決方案3
0 2018-03-21 19:07:43
如果我理解得很好，當您滾動時，您需要標題並保持在頂部。 您應該添加到.header position fixed 和.navbar position: fixed ； 頂部：160px；。 最后在article您應該添加.header和.navbar的高度摘要。 在您的情況下為 232 像素。
/* Header */
.header{
font-family: sans-serif;
font-weight: 900;
background-color: #04042b;
color: #de215a;
text-align: center;
font-size: 200%;
width: 100%;
position:fixed;
top:0;
}
/* Navigation Bar */
.navbar{
background-color: #000005;
position: fixed;
top: 160px;
overflow: hidden;
width:100%;
}
article {
padding-top:232px;
}
為什么我的博客文章頁面上的位置粘性不起作用？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.