为什么 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.