Question

这是我的HTML代码（无法更改顺序）。我在那个标题（黄色）下面有一个div（黑色），另一个div（粉红色是我的另一个标题）。但是粉红色的顶部与黑色的div重叠。

<body>
   <div class="top-block-header" style="background-color:#0e0e0e;color:#fff;padding:7px 0;">
      <div class="container">
         <div class="row">
            <div class="col-md-9" style="font-size:11px;text-transform:uppercase;font-weight:400;line-height:24px;text-align:left;">
               <span style="margin-right: 30px;">Free shipping &amp; Return</span>
               <span style="margin-right: 30px;">money back guarantee</span>
               <span>online support 24/7</span>
            </div>
            <div class="col-md-3" style="font-size:11px;text-align:right;font-weight:400;line-height:24px;">
               <span>CALL US <b style="font-weight:600;padding-left:6px;">+ 000 1584 2578</b></span>
            </div>
         </div>
      </div>
   </div>
   <div class="page-wrapper">
      <header class="page-header">
         <div class="header">
            <h1>Logo</h1>
         </div>
      </header>
   </div>
   <div class="header-bottom">
      New header
   </div>
</body>

这是我的CSS代码

* {
    font-family: Helvetica, "Helvetica Neue", "Open Sans", Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    font-size: .9rem;
}

.page-wrapper {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0;
    min-height: 100%;
    position: relative;
}

.page-header {
    background-color: #F7D533;
    position: fixed;
    width: 100%
}

.header-bottom {
    height: 34px !important;
    top: 0;
    width: 100%;
    margin: 0 auto;
    z-index: 3;
    background-color: pink;
    position: fixed;
}

body {
    height: 1000px;
}

当前输出如下图所示。

不滚动：

首先应该是黑色div，然后是黄色页眉，然后是粉红色div。

在得分时 我想放开黑色div，只修复黄色标头和粉红色div。

如何仅在CSS中实现此目标？

Answer 1

可以使用position:sticky，这是更新的代码段：

* {
  font-family: Helvetica, "Helvetica Neue", "Open Sans", Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  font-size: .9rem;
  margin: 0;
}

.page-header {
  background-color: #F7D533;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
  height: 34px;
}

.header-bottom {
  height: 34px;
  bottom: 0;
  width: 100%;
  margin: 0 auto;
  z-index: 3;
  background-color: pink;
  position: -webkit-sticky;
  position: sticky;
  top: 34px;
}

body {
  height: 1000px;
}

<body>
  <div class="top-block-header" style="background-color:#0e0e0e;color:#fff;padding:7px 0;">
    <div class="container">
      <div class="row">
        <div class="col-md-9" style="font-size:11px;text-transform:uppercase;font-weight:400;line-height:24px;text-align:left;">
          <span style="margin-right: 30px;">Free shipping &amp; Return</span>
          <span style="margin-right: 30px;">money back guarantee</span>
          <span>online support 24/7</span>
        </div>
        <div class="col-md-3" style="font-size:11px;text-align:right;font-weight:400;line-height:24px;">
          <span>CALL US <b style="font-weight:600;padding-left:6px;">+ 000 1584 2578</b></span>
        </div>
      </div>
    </div>
  </div>

  <header class="page-header">
    <div class="header">
      <h1>Logo</h1>
    </div>
  </header>

  <div class="header-bottom">
    New header
  </div>
</body>

position: sticky;的位置取决于用户的滚动位置。

在此处检查位置固定的工作原理： https://www.w3schools.com/howto/howto_css_sticky_element.asp

如何使两个标头一个接一个并在滚动时固定它们？

1 个答案: