为什么不是位置：粘性影响我的导航栏？

时间：2018-03-21 18:42:40

标签： javascript html css css-position sticky

父元素没有溢出属性。父元素具有设定高度。无论我尝试什么，导航栏都不会粘。它也不适用于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 个答案:

答案 0 :(得分：3)

尝试将.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>

答案 1 :(得分：3)

位置粘滞取决于父容器。在导航栏中移动导航。

<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>
...

答案 2 :(得分：0)

如果我理解得很清楚，当你滚动时，你需要标题并保持在最顶层。 您应该添加<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas width="300" height="300"></canvas> <button onclick="ballDrop()">Drop</button> <script> var canvas = document.querySelector('canvas'); var c = canvas.getContext('2d'); // Creates a ball in location (but why does it disappear?) c.beginPath(); c.lineWidth = 5; c.arc(145, 100, 75, 0, Math.PI * 2, true); c.stroke(); var y = 100; function ballDrop() { c.clearRect(0, 0, 300, 800); // Create Ball c.beginPath(); c.arc(145, y, 75, 0, Math.PI * 2, true); c.stroke(); y += 1; requestAnimationFrame(ballDrop); } </script> </body> </html> 固定位置和.header位置：固定; 上：160px;。最后到.navbar，您应该添加article和.header的高度摘要。在你的情况下232px。

.navbar
相关问题
最新问题