CODEWITHSUNDEEP
htmlcssflexboxposition
Jay Patel
Jay Patel

Reputation: 2451

sticky position sidebar beneath the header not showing while scrolling

I'm trying to show the sidebar below the header initially, which works fine when the user lands on the website, but when a user scrolls the page, the sidebar not taking the full height, basically I want to achieve sidebar to be fixed at the left once user scrolls just like shown here.

Here is my code snippet

html,
body {
  height: 100%;
}

.header {
  border: 1px solid black;
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.body {
  height: 100%;
  background-color: tomato;
  display: flex;
  padding-bottom: 2000px;
}

.sidebar {
  width: 30%;
  position: -webkit-sticky;
  position: sticky;
  height: 100%;
  background: black;
  color: white;
  /* top: 0px; */
}

.content {
  padding: 80px;
}
<div class="header">HEADER</div>
<div class="body">
  <div class="sidebar">SIDEBAR</div>
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio saepe tempora, voluptas quidem provident atque iste officiis repudiandae expedita, impedit error maxime laboriosam sit qui porro, quo eligendi inventore fugit.Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Quam non, omnis saepe error nesciunt magnam velit architecto! Pariatur possimus culpa dolor soluta laudantium at neque, consequuntur, mollitia sunt, necessitatibus vitae!Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Nesciunt laboriosam, facere laborum totam in qui ex illum necessitatibus, minus numquam enim! Distinctio facilis est reprehenderit sunt quasi consequuntur ullam autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum ut doloremque
    cupiditate facilis aliquid, voluptatibus at illo similique velit sequi dignissimos consectetur placeat, vero excepturi neque facere tempore id ratione.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dignissimos veritatis libero praesentium
    reprehenderit sequi. A, repellendus, hic. Laborum, et ea voluptas facere! Enim id soluta optio, quam totam officiis!</div>
</div>

Upvotes: 0

Views: 54

Answers (1)

MaxiGui
MaxiGui

Reputation: 6358

I removed height:100% on body and html and also .height, because there is no goal of that as they are adapting their height based on content.

Then I fixed the sidebar height to 100vh.

Now it is fixed. It only leaves at the end because you added a padding-bottom: 2000px; in your .body container.

html,
body {
  /*height: 100%;*/
}

.header {
  border: 1px solid black;
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.body {
  /*height: 100%;*/
  background-color: tomato;
  display: flex;
  padding-bottom: 2000px;
}

.sidebar {
  width: 30%;
  position: -webkit-sticky;
  position: sticky;
  height: 100vh;
  background: black;
  color: white;
  top: 0;
}

.content {
  padding: 80px;
}
<div class="header">HEADER</div>
<div class="body">
  <div class="sidebar">SIDEBAR</div>
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio saepe tempora, voluptas quidem provident atque iste officiis repudiandae expedita, impedit error maxime laboriosam sit qui porro, quo eligendi inventore fugit.Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Quam non, omnis saepe error nesciunt magnam velit architecto! Pariatur possimus culpa dolor soluta laudantium at neque, consequuntur, mollitia sunt, necessitatibus vitae!Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Nesciunt laboriosam, facere laborum totam in qui ex illum necessitatibus, minus numquam enim! Distinctio facilis est reprehenderit sunt quasi consequuntur ullam autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum ut doloremque
    cupiditate facilis aliquid, voluptatibus at illo similique velit sequi dignissimos consectetur placeat, vero excepturi neque facere tempore id ratione.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dignissimos veritatis libero praesentium
    reprehenderit sequi. A, repellendus, hic. Laborum, et ea voluptas facere! Enim id soluta optio, quam totam officiis!</div>
</div>

Upvotes: 1

Related Questions