Don't allow the footer to cover the left panel when scrolling down to the bottom, and make the left panel scrollable down along with the right main panel content.

[fwxie1]

Hi, I am new and have just started creating a website based on this template.

This academicpages template look nice. But I still like the scrolling style in https://stuartgeiger.com/
Specifically, don't make scrollbar appear for the left panel (where profile pictures, social links, etc. are shown); the left panel can scrolled down along when I am scrolling the right main content part; and don't make the footer to cover the left panel.

How to change the codes to realise this? thanks a lot!

[fwxie1]

I have found the solution for this myself.

In _sidebar, remove this following piece of code will solve the issue:

  @media screen and (min-width: $sidebar-screen-min-width) {
    height: 100vh;
    overflow-y: auto;               // Add scrollbar if the sidebar is too long
    position: fixed
    padding-top: $masthead-height;
  }

I consider this code causes some bug. When the resolution or screen size is quite low or high, there will be no problem but it causes problem in my case, when the resolution or screen size is just somewhere in the middle.