Как сделать два заголовка один под другим и закрепить их при прокрутке? - PullRequest
Новая
       36

Как сделать два заголовка один под другим и закрепить их при прокрутке?

0 голосов
/ 25 октября 2018

Вот мой 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;
}

В настоящее время вывод такой, как показано на рисунке ниже.

enter image description here

Без прокрутки:

Сначала следует черный div, затем желтый заголовок, а затем розовый div.

На прокрутку Я хочу отпустить черный div и исправить только желтый заголовок и розовый div.

Как этого добиться только в CSS?

1 Ответ

0 голосов
/ 25 октября 2018

Можно использовать 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; позиционируется на основе позиции прокрутки пользователя.

Проверьте, как работает позиция sticky: https://www.w3schools.com/howto/howto_css_sticky_element.asp

...