为什么 position:sticky 不影响我的导航栏？
[英]Why isn't position: sticky affecting my navbar?
问题描述
There is no overflow property for parent elements.
父元素没有溢出属性。 The parent element has a set height.父元素有一个设定的高度。 The navigation bar simply won't be sticky no matter what I try.无论我尝试什么，导航栏都不会粘住。 It doesn't work with JavaScript either.它也不适用于 JavaScript。 I must be missing something.我一定是错过了什么。 Below is the code.下面是代码。 Somebody please tell me what I did wrong:有人请告诉我我做错了什么：
/* 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
Try moving the styles you have for .navbar to the parent nav root level element (so it sticks to the parent body ).尝试将.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
Position sticky depends on the parent container.位置sticky取决于父容器。 Move nav inside your navbar .在您的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
If I understand well, when you are scrolling you want header and stays on top.如果我理解得很好，当您滚动时，您需要标题并保持在顶部。 You should add to .header position fixed and .navbar position: fixed;您应该添加到.header position fixed 和.navbar position: fixed ； top: 160px;.顶部：160px；。 Finally to article you should add the summary of height from .header and .navbar .最后在article您应该添加.header和.navbar的高度摘要。 In your case 232px.在您的情况下为 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.
相关问题
为什么我的博客文章页面上的位置粘性不起作用？ - Why isn't position sticky working on my blog article page?
为什么我的响应式导航栏不起作用？ - Why is my responsive navbar isn't working?
为什么我的粘性导航栏不能在移动设备上运行？ - Why won't my sticky navbar work on mobile?
为什么我的导航栏出现在我的网站上？ - Why isn't my navbar appearing on my website?
为什么我的JavaScript呈现的导航栏不被抓取？ - Why isn't my javascript-rendered navbar being crawled?
为什么我的导航栏文本不在同一行？ - Why isn't my navbar text on the same line?
为什么我的下拉菜单不适用于导航栏？ - Why isn't my dropdown menu working on navbar?
导航栏问题与粘性 position - Navbar issue with sticky position
为什么我的旋转木马没有放在我的粘性导航栏下面？ - Why my carousel doesn't get down under my sticky navbar?
为什么当我切换到粘性时导航栏中的字体颜色没有改变？ - Why my font color in navbar didn't change when i toggle to sticky?
相关标签