Title: Scroll Within Sidebar
Last modified: February 22, 2017

---

# Scroll Within Sidebar

 *  [dietbros](https://wordpress.org/support/users/dietbros/)
 * (@dietbros)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/scroll-within-sidebar/)
 * Hey Max,
 * Can’t thank you enough for the incredible job you’re doing!
 * Have a quick question which I’m surprised hasn’t been brought up before. So, 
   my content is generally very lengthy and therefore I have a table of contents
   in my sidebar (along with social follow and maybe a subscription box that I might
   add in the future) but the length of the sidebar is a lot longer than the height
   of the page which causes the sidebar to get cut off.
 * How can I make the sidebar scrollable so as to include all the content in it?
   And also would be great if I could get the sidebar to stick to the right (right:
   0?). 🙂
 * URL:
    [https://dietbros.com/ultimate-diet-guide/paleo-diet/](https://dietbros.com/ultimate-diet-guide/paleo-diet/)
 * Regards,
    K.

Viewing 10 replies - 1 through 10 (of 10 total)

 *  Plugin Contributor [Max Bond](https://wordpress.org/support/users/max-bond/)
 * (@max-bond)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/scroll-within-sidebar/#post-8844726)
 * 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.
 *  Thread Starter [dietbros](https://wordpress.org/support/users/dietbros/)
 * (@dietbros)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/scroll-within-sidebar/#post-8848934)
 * 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.
 *  Thread Starter [dietbros](https://wordpress.org/support/users/dietbros/)
 * (@dietbros)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/scroll-within-sidebar/#post-8851711)
 * So I did some tinkering and got this to partially work:
    [http://screencast-o-matic.com/watch/cbnti86rdj](http://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:
    [http://pasteboard.co/DjGnQ6Y31.png](http://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://www.khanacademy.org/math/calculus-home/integration-calc)
   [http://neat.bourbon.io/docs/1.8.0/](http://neat.bourbon.io/docs/1.8.0/)
 * Found something else that could be useful. You think we could use this to make
   it work?
    [http://jsfiddle.net/39james/WucN3/](http://jsfiddle.net/39james/WucN3/)
 * Regards,
    K.
 *  Plugin Contributor [Max Bond](https://wordpress.org/support/users/max-bond/)
 * (@max-bond)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/scroll-within-sidebar/#post-8853269)
 * Hi! I think this code:
    [http://jsfiddle.net/39james/WucN3/](http://jsfiddle.net/39james/WucN3/)
   will work for you! You have to try it.
 * Just move css [http://pasteboard.co/DjGnQ6Y31.png](http://pasteboard.co/DjGnQ6Y31.png)
   from inline to class level.
    Let it be class affix as in jsfiddle example!
 *  Thread Starter [dietbros](https://wordpress.org/support/users/dietbros/)
 * (@dietbros)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/scroll-within-sidebar/#post-8861763)
 * 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:
    [http://jsfiddle.net/WucN3/70/](http://jsfiddle.net/WucN3/70/)
 * Screencast again for your reference:
    [http://screencast-o-matic.com/watch/cbnti86rdj](http://screencast-o-matic.com/watch/cbnti86rdj)
 * Screenshot of the CSS applied in my browser:
    [http://pasteboard.co/DOYDDrjqI.png](http://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 🙂
 *  Plugin Contributor [Max Bond](https://wordpress.org/support/users/max-bond/)
 * (@max-bond)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/scroll-within-sidebar/#post-8861885)
 * Here is corrected fiddle: [http://jsfiddle.net/0db69fp5/1/](http://jsfiddle.net/0db69fp5/1/)
 *  Thread Starter [dietbros](https://wordpress.org/support/users/dietbros/)
 * (@dietbros)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/scroll-within-sidebar/#post-8861969)
 * 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/fat-burning/the-ultimate-fat-burning-foods-list/)
   [https://dietbros.com/ultimate-diet-guide/keto-diet/](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 9 years, 3 months ago by [dietbros](https://wordpress.org/support/users/dietbros/).
 *  Plugin Contributor [Max Bond](https://wordpress.org/support/users/max-bond/)
 * (@max-bond)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/scroll-within-sidebar/#post-8862086)
 * 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;
       }
       ```
   
 *  Thread Starter [dietbros](https://wordpress.org/support/users/dietbros/)
 * (@dietbros)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/scroll-within-sidebar/#post-8869149)
 * 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!
 *  [Njengah](https://wordpress.org/support/users/njengah/)
 * (@njengah)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/scroll-within-sidebar/#post-9110832)
 * 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 9 years, 1 month ago by [Njengah](https://wordpress.org/support/users/njengah/).

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Scroll Within Sidebar’ is closed to new replies.

 * ![](https://ps.w.org/q2w3-fixed-widget/assets/icon-256x256.png?rev=2384479)
 * [Fixed Widget and Sticky Elements for WordPress](https://wordpress.org/plugins/q2w3-fixed-widget/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/q2w3-fixed-widget/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/q2w3-fixed-widget/)
 * [Active Topics](https://wordpress.org/support/plugin/q2w3-fixed-widget/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/q2w3-fixed-widget/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/q2w3-fixed-widget/reviews/)

 * 10 replies
 * 3 participants
 * Last reply from: [Njengah](https://wordpress.org/support/users/njengah/)
 * Last activity: [9 years, 1 month ago](https://wordpress.org/support/topic/scroll-within-sidebar/#post-9110832)
 * Status: not resolved