Question

我正在尝试制作粘性标头。我有一个徽标，在下面我想创建一个导航栏，该导航栏应具有粘性。我没有使用JavaScript，只是想在CSS中使用position：sticky。我在其他示例代码上对此进行了尝试，并且可以正常工作，但是由于某种原因，它在我正在构建的网站中不起作用。我读了一些技巧（删除溢出：隐藏，删除父标记中的固定高度等）。它仍然对我不起作用。您能否看一下我的代码并提出解决方案？非常感谢！

HTML：

theoretical speedup

Css：

path

Answer 1

这是可行的。我删除了不必要的父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>

CSS / html Position：sticky对我不起作用

1 个答案: