position:标头中的粘滞不起作用

时间:2017-12-25 10:13:57

标签: css sticky

我的立场:粘不起作用。我不知道为什么会这样,我已经尝试了一切。下面我发布了我的html和css代码。

// Second
.app-secondheader {
    height: 85px;
    overflow: visible;
    top: 0px;
    background-color: #3B3B3B;
    border-bottom: 4px solid #ED1C24;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #ffffff;
    padding-left: 30px;
    padding-right: 30px;
    top: 0;
    position: -webkit-sticky;
    position: sticky;
}
<!-- Login -->
<nav>
    <!-- Second -->
    <div class="app-secondheader">
      <div class="row">
        <!-- Logo -->
        <div class="pares-logo">
          <a class="pares-logo-link" href="http://test.pares.de">
            <img class="logo" src="./assets/img/logo.png" target="_blank" data-placement="top" data-title="" data-toggle="tooltip" title="" data-original-title="Logo" alt="MyLogo">
          </a>
        </div>
      </div>
    </div>
  </nav>

1 个答案:

答案 0 :(得分:0)

您的问题是您将// Second放入CSS文件中。 CSS无法理解,如果您想要放置文本/* This text will work in CSS file */

,它就会崩溃

&#13;
&#13;
.app-secondheader {
    height: 85px;
    overflow: visible;
    background-color: #3B3B3B;
    border-bottom: 4px solid #ED1C24;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #ffffff;
    padding-left: 30px;
    padding-right: 30px;
    top: 0;
    position: -webkit-sticky;
    position: sticky;
}
&#13;
<!-- Login -->
<nav>
    <!-- Second -->
    <div class="app-secondheader">
      <div class="row">
        <!-- Logo -->
        <div class="pares-logo">
          <a class="pares-logo-link" href="http://test.pares.de">
            <img class="logo" src="./assets/img/logo.png" target="_blank" data-placement="top" data-title="" data-toggle="tooltip" title="" data-original-title="Logo" alt="MyLogo">
          </a>
        </div>
      </div>
    </div>
  </nav>
&#13;
&#13;
&#13;