CODEWITHSUNDEEP
htmlcssscrollsidebar
Freezy
Freezy

Reputation: 146

Allow sidebar to scroll to view all items with position fixed

I made a sidebar with a content, The sidebar is fixed so when you scroll it must stays there, but I want to make it when you scroll the page (like a native scroll) to make de sidebar scroll until you will be able to see the last item.

Something like how is on twitter on the right side: https://gyazo.com/e7482730ef7129952b09c5d3b4b0adc1

My code is this:

body {
background: black;
color:white;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
    background: darkred;
}

.sidebar-item {
    padding: 50px 20px;
    font-size: 20px;
}

.sidebar-item:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

.content {
    width: 500px;
    margin-left: 200px;
    border-left: 1px solid rgb(56, 68, 77);
    border-right: 1px solid rgb(56, 68, 77);
    height: 100%;
    background:blue;
}

.article {
    padding: 20px;
    margin-bottom: 20px;
}
<div class="sidebar">
    <div class="sidebar-item-list">
        <div class="sidebar-item">
            Item 1
        </div>
        <div class="sidebar-item">
            Item 2
        </div>
        <div class="sidebar-item">
            Item 3
        </div>
        <div class="sidebar-item">
            Item 4
        </div>
        <div class="sidebar-item">
            Item 5
        </div>
        <div class="sidebar-item">
            Item 6
        </div>
        <div class="sidebar-item">
            Item 7
        </div>
        <div class="sidebar-item">
            Item 8
        </div>
        <div class="sidebar-item">
            Item 9
        </div>
        <div class="sidebar-item">
            Item 10
        </div>
        <div class="sidebar-item">
            Item 11
        </div>
        <div class="sidebar-item">
            Item 12
        </div>
        <div class="sidebar-item">
            Item 13
        </div>
        <div class="sidebar-item">
            Item 14
        </div>
        <div class="sidebar-item">
            Item 15
        </div>
        <div class="sidebar-item">
            Item 16
        </div>
        <div class="sidebar-item">
            Item 17
        </div>
    </div>
</div>

<div class="content">
    <div class="content-list">
        <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
        <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
        <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
        <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
        <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
        <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
        <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
        <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
        <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
        <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
        <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
        <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
        <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
        <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
        <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
        <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
        <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
        <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    </div>
</div>

Upvotes: 0

Views: 47

Answers (1)

SofosF.
SofosF.

Reputation: 89

Try this:

  1. Put your sidebar and your content-list inside a container.
    For example in this case let's say it's your 'content' div.
  2. Apply display: flex; in your 'content' in order for the 'sidebar' and 'content-list' to render side by side.
  3. In your sidebar, add position: sticky; and top: 0px; (Note top: 0; will not work. You have to include 'px'.)

Check the code changes below. I made some additional small changes on the spacing of the elements.

Take a look at this as well: https://developer.mozilla.org/en-US/docs/Web/CSS/position

Was that helpful?

body {
  background: black;
  color: white;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
}

.sidebar {
  position: sticky;
  top: 0px;
  left: 0;
  min-width: 200px;
  height: 100%;
  background: darkred;
}

.sidebar-item {
  padding: 50px 20px;
  font-size: 20px;
}

.sidebar-item:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.content {
  border-left: 1px solid rgb(56, 68, 77);
  border-right: 1px solid rgb(56, 68, 77);
  height: 100%;
  background: blue;
  display: flex;
}

.article {
  padding: 20px;
  margin-bottom: 20px;
}
<div class="content">

  <div class="sidebar">
    <div class="sidebar-item-list">
      <div class="sidebar-item">
        Item 1
      </div>
      <div class="sidebar-item">
        Item 2
      </div>
      <div class="sidebar-item">
        Item 3
      </div>
      <div class="sidebar-item">
        Item 4
      </div>
      <div class="sidebar-item">
        Item 5
      </div>
      <div class="sidebar-item">
        Item 6
      </div>
      <div class="sidebar-item">
        Item 7
      </div>
      <div class="sidebar-item">
        Item 8
      </div>
      <div class="sidebar-item">
        Item 9
      </div>
      <div class="sidebar-item">
        Item 10
      </div>
      <div class="sidebar-item">
        Item 11
      </div>
      <div class="sidebar-item">
        Item 12
      </div>
      <div class="sidebar-item">
        Item 13
      </div>
      <div class="sidebar-item">
        Item 14
      </div>
      <div class="sidebar-item">
        Item 15
      </div>
      <div class="sidebar-item">
        Item 16
      </div>
      <div class="sidebar-item">
        Item 17
      </div>
    </div>
  </div>
  <div class="content-list">
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
        <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
        <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
    <div class="article">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, vero veniam eaque dignissimos repudiandae quibusdam error ad, aut beatae quam earum alias odit neque labore aspernatur culpa. Molestiae, culpa nisi.</div>
  </div>
</div>

Upvotes: 1

Related Questions