CODEWITHSUNDEEP
htmlcssflexboxstickysidenav
Mbs Yaswanth
Mbs Yaswanth

Reputation: 150

position sticky doesnt apply to flex child though i use top

im trying to build a ui with html.

  1. The navbar should stay at the top
  2. Some video below the navbar and the other content should scroll on the video( for now it is brown box) .
  3. The sky blue box(which is for side navigation) should stop right below the nav box and pink box(content box) should continue scrolling.

issues :

  1. the sticky nav box scrolls up after some scrolling and
  2. the sky blue box doesn't stop below nav box. please see the codepen and help me out.... html

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

.container {
  display: flex;
  position: relative;
  top: 400px;
  border-top: 4px solid black;
}

.box1 {
  /* height:500px; */
  position: sticky;
  top: 50px;
  width: 40%;
  background-color: aqua;
  border: 2px solid grey;
}

.box2 {
  height: 1000px;
  width: 60%;
  background-color: pink;
}

.nav {
  position: sticky;
  top: 0;
  background-color: blue;
  z-index: 1000;
  height: 50px;
}

.image-con {
  position: fixed;
  background-color: brown;
  border: 2px solid yellow;
  height: 500px;
  width: 100%;
  z-index: -1000;
}
<div class="nav"></div>

<div class="image-con"></div>

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

https://codepen.io/mbs-yaswanth/pen/yZOLXQ

Upvotes: 2

Views: 3632

Answers (1)

KJEK-Code
KJEK-Code

Reputation: 705

Remove

body,html{
        height: 100%;
}

Once your sticky nav is hitting the bottom of your html and body it is not sticky anymore. It seems to move back up the page but its really just not following you through the overflow. Hope this helps. EDIT
I think this is what you are looking for I changed a good bit of your code so just review it carefully. for some reason when you run the snippet box 2 gets smaller but it works in full page preview. Hope this helps

body,
html {
  width: 100%;
  margin: 0;
}

.box1 {
  height:500px; 
  position: sticky;
  top: 50px;
  width: 39%;
  vertical-align: top;
  display: inline-block;
  background-color: aqua;
  border: 2px solid grey;
}

.box2 {
  display: inline-block;
  height: 1000px;
  width: 60%;
  background-color: pink;
}

.nav {
  position: sticky;
  top: 0;
  background-color: blue;
  z-index: 1;
  height: 50px;
}

.image-con {
  background-color: brown;
  border: 2px solid yellow;
  height: 500px;
  width: 100%;
}
<div class="nav"></div>

<div class="image-con"></div>

<div class="box1"></div>

<div class="box2"></div>

Upvotes: 2

Related Questions