CODEWITHSUNDEEP
css
Sahad Nk
Sahad Nk

Reputation: 79

Fixed side bar is not scrolling with page contents

I've a fixed side bar on the right side of the page (position: fixed) But it's contents are not fully visible as it's not scrolling with the page scroll. I could have added overflow-y: scroll in the .sidebar{} css settings. But don't want a separate scroll bar for sidebar. Is there an option to make it scroll with the full page scroll.

Here is my css settings for sidebar :

.sidebar {
  text-align: center;
  padding: 2rem,1rem;
  color: rgba(255,255,255,.5);
  background-color: #202020;
  top: 0;
  bottom: 0;
}

If you want to debug to see what went wrong, here is it running live : https://pagefault.me

Thanks

Upvotes: 3

Views: 3171

Answers (2)

kennasoft
kennasoft

Reputation: 1593

Based on the answer I suggested in my comment, I was able to work in chrome to arrive at the css below.

1) Add some css to the .sidebar-nav component

nav.sidebar-nav {
    position: absolute;
    overflow-y: scroll;
    top: 100px; /*100px to give some room for the sidebar heading (without this, absolute position will make the nav overlap)*/
    left: 15px; /* you can make this zero and add `padding-left: 15px` */
    bottom: 15px; /* leave some room for copyright section */
    right: -17px; /*this may vary from browser to browser (i suggest using the width of the widest scrollbar, then adjust for padding-right)*/
    padding-right: 15px; /*padding to prevent the text from flowing off screen*/
}

2) The .container class becomes

.sidebar .container{
    max-width: 38rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    position: relative;
    overflow: hidden;
}

3) Make sure the footer bit remains at the bottom after making .sidebar-nav absolute

.sidebar .container > p:last-of-type {
    position: absolute;
    bottom: -15px;
}

Of course as mentioned in the original solution, you have to test the scrollbar widths in different browsers to arrive at the right width to use in place of right: -17px in step 1.

Upvotes: 3

user4447799
user4447799

Reputation:

Use absolute position instead of fixed as you want it to scroll it along with the page.

body {
  margin: 0;
  padding: 0;
  position: relative;
}

main {
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  height: 300vh;
  background: beige;
}

aside {
  position: absolute;
  top: 0;
  right: 0;
  width: 20%;
  height: 300vh;
  background: black;
  color: white;
}
<main></main>
<aside><aside>

A flex box solution without positioning :

body {
  margin: 0;
  padding: 0;
  display: flex;
}

main {
  width: 80%;
  height: 300vh;
  background: beige;
}

aside {
  width: 20%;
  height: 300vh;
  background: black;
  color: white;
}
<main></main>
<aside></aside>

Upvotes: 1

Related Questions