【发布时间】：2020-01-28 17:17:04
【问题描述】：
父元素没有溢出属性。父元素具有设定的高度。无论我尝试什么，导航栏都不会发粘。它也不适用于 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>【问题讨论】：
标签： javascript html css css-position sticky