CSS fixed list header using one scroll bar

debugcn Published at Dev

johnnyshrewd

I basically want to have a scrollable list with a fixed header. The only thing is that I want the scroll bar to extend the full height of the parent, but only scroll nav-items (keeping the logo fixed).

I am currently doing this:

<div className="home-page-nav">
   <div className="logo"></div>

   <div className="nav-items">
     <div className="nav-item"></div>
     ....
   </div>
</div>

And CSS:

.home-page-nav {
   overflow:auto;
   overflow-y:scroll;
}

.logo {
   position: fixed;
}

Here is what I want to achieve:

Huangism

You can use position: sticky;

below is an example, I specified a height for the overflow container so you can actually scroll the content within

You can read more on it https://developer.mozilla.org/en-US/docs/Web/CSS/position and make sure to check browser support

A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.

.home-page-nav {
  overflow: auto;
  overflow-y: scroll;
  height: 400px;
}

.logo {
  position: -webkit-sticky;
  position: sticky;
  background-color: green;
  top: 0;
}

.nav-item {
  height: 40px;
  margin-bottom: 10px;
  background-color: grey;
}

Document
<br/>
<br/>
<br/><br/>
<div class="home-page-nav">
  <div class="logo">I am logo</div>

  <div class="nav-items">
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
  </div>
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.