Scroll Within Sidebar

Hi!
To make sidebar scrollable you have to add a few css rules:
1. First, set sidebar height. For axample 700px
2. Add overflow-y: scroll

.sidebar {
height: 700px;
overflow-y: scroll
}

If you set right:0 – sidebar will be sticked to the right side of the browser window.

Hey Max,

Thanks for the prompt reply!

So if we want the top to be aligned with the top of the screen and the bottom with the bottom of the screen, can we do a top:0 and bottom:0 instead of having a fixed height?

Only thing is how do we get it to get attached to the top of the screen only once the person gets to the sidebar (as you can see in the link given above, the sidebar comes pretty far down in the page). How do you suggest we do this?

Regards,
K.

So I did some tinkering and got this to partially work:
https://screencast-o-matic.com/watch/cbnti86rdj
Now there is one issue here, I don’t want the sidebar to be fixed right from the top of the page and I’m unable to get the sidebar to stay fixed only once the top of the sidebar touches the top of the viewport. Everything else works perfectly fine as you can see.

Here’s what I added to the sidebar CSS:
https://pasteboard.co/DjGnQ6Y31.png

Here are a couple of examples of other sites getting this to work:
https://www.khanacademy.org/math/calculus-home/integration-calc
https://neat.bourbon.io/docs/1.8.0/

Found something else that could be useful. You think we could use this to make it work?
https://jsfiddle.net/39james/WucN3/

Regards,
K.

Hi! I think this code:
https://jsfiddle.net/39james/WucN3/
will work for you! You have to try it.

Just move css https://pasteboard.co/DjGnQ6Y31.png from inline to class level.
Let it be class affix as in jsfiddle example!

Unable to get this to work for my site for some reason. Could you tell me what I need to replace from the fiddle for it to work like the screencast below (except that the sidebar shouldn’t be fixed from the top of the page of course):

Here’s the fiddle w/ my CSS:
https://jsfiddle.net/WucN3/70/

Screencast again for your reference:
https://screencast-o-matic.com/watch/cbnti86rdj

Screenshot of the CSS applied in my browser:
https://pasteboard.co/DOYDDrjqI.png

What classes do I need to replace in the CSS and JS for it to work on my site? Would be wonderful if you could help me with this!

Probably would be super easy to roll out as a future update I’m hoping ??

Here is corrected fiddle: https://jsfiddle.net/0db69fp5/1/

Doesn’t seem to work for my site. What do I replace the sidebar element with for it to work on (A couple of URLs for example):
https://dietbros.com/fat-burning/the-ultimate-fat-burning-foods-list/
https://dietbros.com/ultimate-diet-guide/keto-diet/

Tried replacing .sidebar with .et_pb_widget_area_right but that didn’t seem to work too.

Edit:
And the previous JS was perfect! I need the sidebar to start scrolling only once the top of the sidebar is reached like in the earlier fiddle you gave. Don’t want it right from the top like the screencast. Would’ve been able to do it with CSS only (position: fixed) if I needed that ??

• This reply was modified 7 years, 9 months ago by dietbros.

Make this change to javascript code:

jQuery(document).ready(function($){

  var stickySidebar = $('.sidebar').offset().top;

  $('.sidebar').height($(window).height() - 59);
  
  $(window).scroll(function() {  
    if ($(window).scrollTop() > stickySidebar) {
        $('.sidebar').addClass('affix');
    }
    else {
        $('.sidebar').removeClass('affix');
    }  
  });
});

Do not replace .sidebar with .et_pb_widget_area_right! Just add sidebar class to sidebar container.

Add this code to your style.css:

.sidebar.affix{
    position:fixed;
    top:59px;
}

I managed to parallely get some additional help and got it to work using a more tweaked code. I would really like to thank you for all the time and effort you have put in to this plugin and the tremendous support as well, all to serve the community. Thank you good sir!

Hi Max,

I am trying to implement this scroll feature but I noticed a missing semicolon in your first CSS code. I think it should be like this:

.sidebar {
height: 700px;
overflow-y: scroll; 
}

This works for me but I am wondering how do I shift the scroll bar to the left side?

• This reply was modified 7 years, 6 months ago by Njengah.