CODEWITHSUNDEEP
htmlcsssticky
3gwebtrain
3gwebtrain

Reputation: 15293

Sticky position not works as expected. works as buggy

I am trying to use the stick position with my header part. on scroll it works with couple of side move. then the header hides. it should be always in the top for my requirement. i have give z-index as well in higher value. any one help me to understand the issue.

HTML:

 <div class="wrapper">
  <div class="navi">Navigation</div>
  <header>Header goes here</header>
  <div class="container">
    <div class="child1">Chile-1</div>
    <div class="child2">Chile-2</div>
    <div class="child3">Chile-3</div>
    <div class="child4">Chile-4</div>
    <div class="child4">Chile-5</div>
    <div class="child4">Chile-6</div>
    <div class="child4">Chile-7</div>
  </div>
</div>

css:

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.wrapper {
  height: 100%;
  position: relative;
}

.container {
  border: 2px solid blue;
  height: 100%;
}

.navi {
  border: 2rem solid lightpink;
}

header {
  background-color: gray;
  padding: 1rem;
  top: 0;
  left: 0;
  right: 0;
  position: sticky;
  z-index: 100;
}

.container > div {
  height: 50%;
  border: 1px solid red;
}

.child1 {
  background-color: brown;
}

.child2 {
  background-color: yellow;
}

.child3 {
  background-color: lightblue;
}

.child4 {
  background-color: greenyellow;
}

Live demno

Upvotes: 1

Views: 209

Answers (2)

Suresh Suthar
Suresh Suthar

Reputation: 83

 html,
    body {
      padding: 0;
      margin: 0;
    }

    .wrapper {
      position: relative;
    }

    .navi {
      border: 2rem solid lightpink;
    }

    header {
      top: 0;
      padding: 1rem;
      z-index: 100;
      position: sticky;
      background-color: gray;
    }

    .container>div {
      padding: 30px;
      position: relative;
      z-index: 0;
    }

    .child1 {
      background-color: brown;
    }

    .child2 {
      background-color: yellow;
    }

    .child3 {
      background-color: lightblue;
    }

    .child4 {
      background-color: greenyellow;
    }
<div class="wrapper">
    <div class="navi">Navigation</div>
    <header>Header goes here</header>
    <div class="container">
      <div class="child1">Chile-1</div>
      <div class="child2">Chile-2</div>
      <div class="child3">Chile-3</div>
      <div class="child4">Chile-4</div>
      <div class="child4">Chile-5</div>
      <div class="child4">Chile-6</div>
      <div class="child4">Chile-7</div>
      <div class="child4">Chile-7</div>
      <div class="child4">Chile-7</div>
      <div class="child4">Chile-7</div>
      <div class="child4">Chile-7</div>
      <div class="child4">Chile-7</div>
      <div class="child4">Chile-7</div>
    </div>
  </div>

Upvotes: 0

Sundaramoorthy Anandh
Sundaramoorthy Anandh

Reputation: 601

when adding 100% height to .wrapper and .container, the height get computed as below picture (838px in my case).. and when scroll crosses 838px, the header looses the sticky property.. when you set to auto, height will be computed automatically (adding all the divs' height) and it works expected..

height as 100% height: 100%

height as auto height: auto

Upvotes: 1

Related Questions