我正在尝试制作一个粘性标题。我有一个 Logo ，在下面我想创建一个应该具有粘性的导航栏。我没有使用JavaScript，只是想在CSS中使用position:sticky。我在其他示例代码上尝试过这一点并且它有效，但是由于某种原因它在我正在构建的网站中不起作用。我读了一些提示(删除溢出:隐藏，删除父标签中的固定高度等)。它对我来说仍然不起作用。您能看一下我的代码并提出解决方案吗？非常感谢!
HTML:
<html lang="pl" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Title</title>
</head>
<body>
<div>
<div class="logo">
<img src="logo_m2.png" class="logo_img">
</div>
<div class="nav-row">
<div class="main-nav">
<ul>
<li><a href="#">btn1</a></li>
<li><a href="#">btn1</a></li>
<li><a href="#">btn1</a></li>
<li><a href="#">btn1</a></li>
<li><a href="#">btn1</a></li>
<li><a href="#">btn1</a></li>
</ul>
</div>
<div class="main-social">
<ul>
<li>F</li>
<li>U</li>
<li>I</li>
</ul>
</div>
</div>
</div>
<div class="section">
<div class="posts">
post
</div>
<div class="r-panel">
r-panel
</div>
</div>
<footer>
footer
</footer>
</body>
</html>
CSS:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
box-sizing: border-box;
color:#2d3436;
width: 100%;
padding:40px;
padding-top: 0;
}
.logo{
border-bottom-style: solid;
border-width: 1.5px;
}
.logo_img {
display:block;
margin-right: auto;
margin-left: auto;
width:50%;
height: auto;
}
nav-row {
margin: 5px;
height: 40px;
border: solid;
position: sticky;
top:0;
}
.main-nav{
float:left;
}
.main-social{
float:right;
}
.main-nav li {
display:inline-block;
}
.main-social li{
display: inline-block;
}
.section {
margin-top: 10px;
height:1000px;
border-style:dotted;
}
.posts{
border-color:red;
border-style: solid;
}
footer {
border-top: solid;
border-color: #3c3c3c;
height: 50px;
}
最佳答案
这是可行的。我删除了不必要的父 div。我向您展示了我在 HTML 中删除的位置。
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
box-sizing: border-box;
color:#2d3436;
width: 100%;
padding:40px;
padding-top: 0;
}
.logo{
border-bottom-style: solid;
border-width: 1.5px;
}
.logo_img {
display:block;
margin-right: auto;
margin-left: auto;
width:50%;
height: auto;
}
.nav-row {
margin: 5px;
height: 40px;
border: solid;
position: sticky;
top:0;
}
.main-nav{
float:left;
}
.main-social{
float:right;
}
.main-nav li {
display:inline-block;
}
.main-social li{
display: inline-block;
}
.section {
margin-top: 10px;
height:1000px;
border-style:dotted;
}
.posts{
border-color:red;
border-style: solid;
}
footer {
border-top: solid;
border-color: #3c3c3c;
height: 50px;
}<html lang="pl" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Title</title>
</head>
<body>
<!-- I removed this <div> -->
<div class="logo">
<img src="logo_m2.png" class="logo_img">
</div>
<div class="nav-row">
<div class="main-nav">
<ul>
<li><a href="#">btn1</a></li>
<li><a href="#">btn1</a></li>
<li><a href="#">btn1</a></li>
<li><a href="#">btn1</a></li>
<li><a href="#">btn1</a></li>
<li><a href="#">btn1</a></li>
</ul>
</div>
<div class="main-social">
<ul>
<li>F</li>
<li>U</li>
<li>I</li>
</ul>
</div>
</div>
<!-- I removed this </div> -->
<div class="section">
<div class="posts">
post
</div>
<div class="r-panel">
r-panel
</div>
</div>
<footer>
footer
</footer>
</body>
</html>关于html - CSS/html 位置 :sticky doesn't work for me，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54486236/