Question

正在寻找此问题的答案，但仅发现嵌套的divs是造成这种情况的原因。

我正在测试布局，并且试图在标题下方创建一个粘性导航栏。最初，sticky运作良好，但是，一旦我浮动div为下面的内容创建列，sticky似乎就停止了工作。在弄乱了div之后，我发现导航栏到达某个位置时失去了它的粘性（取决于div的浮动状态）。不幸的是，我的导航栏不是身体以外的任何元素的子代。

代码如下：

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width", initial-scale=1.0">
    <title>My sweet page</title>
    <style>
    * {
    	box-sizing: border-box;
    	font-family: "Verdana", sans-serif;
    }
    
    body {margin:0}
    
    .header {
    	background-color: #66ff66;
    	text-align: center;
    	padding: 20px;
    	color: white;
    	text-shadow: 1px 1px 0 #444;
    	font-size: 300%;
    }
    
    .topnav {
    	position: sticky;
    	top: 0;
    	overflow: hidden;
    	background-color: #5c5c3d;
    	width: 100%;
    }
    
    .topnav a {
    	float: left;
    	display: block;
    	color: white;
    	text-decoration: none;
    	text-align: center;
    	padding: 14px 16px;
    }
    
    .topnav a:hover:not(.active) {
    	background-color: #f5f5f0;
    	color: black;
    }
    
    .active {
    	background-color: #66ff66;
    	color: white;
    	text-shadow: 1px 1px 0 #444;
    }
    
    #about {
    	float:right;
    }
    
    
    .sidebar {
    	margin: 0;
    	padding: 0;
    	float: left;
    	background-color: #e0e0d1;
    	height: 100vw;
    	width:15%;
    	overflow: auto;
    }
    
    .sidebar a {
    	display: block;
    	color: white;
    	background-color: #990000;
    	padding: 15px;
    	text-decoration: none;
    }
    
    .sidebar a:hover {
    	background-color: #ffe6e6;
    	color: black;
    }
    
    .content {
    	float: left;
    	width: 70%;
    	padding: 10px;
    }
    
    .adspace {
    	width: 15%;
    	padding: 10px;
    	border: 1px solid black;
    }
    
    </style>
    </head>
    <body>  
    	<div class=header>My Sweet Page</div>
    	<div class=topnav>
    		<a class=active href="#">Home</a>
    		<a href="#">Page 1</a>
    		<a href="#">Page 2</a>
    		<a href="#">Page 3</a>
    		<a href="#">Page 4</a>
    		<a id="about" href="#">About</a>
    	</div>
    	<div class=sidebar>
    		<a href="#">A Button</a>
    		<a href="#">Another Button</a>
    	</div>
    	<div class=content>
    
    		<h1>Some content</h1>
    		<p>Some other content</p>
    		
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    		<p style="margin: 20px>Filler!</p>
    	</div>
    	<div class=adspace></div>
    </body>
    </html>

因此，在这里您可以看到导航栏几乎立即松开了，侧边栏和内容div向左浮动。如果我忽略浮动内容div，则导航栏会一直保持粘滞状态，直到到达该div。如果我将广告空间div左移，则导航栏根本不会停留。

知道我在做什么错吗？

粘性元素变得不粘

0 个答案: