CODEWITHSUNDEEP
htmlcssscrollheadercss-position
Nausif
Nausif

Reputation: 400

How to make two headers one below other and make them fixed on scrolling?

Here is my HTML code (can't change the order). I have one div (black) below that one header (yellow) and another div(pink which is another header for me). But the pink one comes at top overlapping with black 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>

And here is my CSS code

* {
    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;
}

Currently the output is as shown in image below.

enter image description here

Without scrolling :

Black div should be first then followed by yellow header and then pink div.

On scolling I want to let go the black div and only fix the yellow header and pink div.

How to achieve this in only CSS?

Upvotes: 1

Views: 3710

Answers (1)

Vikas Jadhav
Vikas Jadhav

Reputation: 4692

It's possible using position:sticky here is the updated code snippet:

* {
  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; is positioned based on the user's scroll position.

Check here how position sticky works: https://www.w3schools.com/howto/howto_css_sticky_element.asp

Upvotes: 3

Related Questions