Smooth Sidebar Scrolling

Have you ever wondered how some sites keep their sidebar scroll smoothly to the top and then stays there no matter where you are in the page? When you tried the same thing, it jitters around as you scroll. To me, it seems like WebKit based browsers do not nicely report the scroll position of the window. How do you get around that? I will try to explain one way to overcome that problem.

We will be using the ScriptManager plugin to smoothly scroll the sidebar to the proper place. This plugin is for a WordPress web site, but the same code can be incorporated into any website.

The trick is really working with the ‘position’ CSS tag for the sidebar. We can dynamically set the sidebar’s CSS using a small jQuery script. Therefore, create a JavaScript script named ‘SidebarScroll’ in Script Manager and insert the code below:

//
// First of all, let's create an enclosure to use the $ for jQuery.
//
jQuery(function($) {
   //
   //Define variables to be used and initialize them.
   //
    var $sidebar   = $("#sidebar"),                               // Change this ID to the ID of your site's sidebar.
        $window    = $(window),                                   // This is the jQuery for the window area
        offset     = $sidebar.offset(),                           // This is for getting the top of the sidebar.
        Padding    = 17,                                          // This value will have to be calabrated for your particular site.
        padwrapper = parseInt($('#wrapper').css('padding-left')), // This is the wrapper padding - Wordpress theme specific
        wmain      = $('#main').width(),                          // get the width of the main area
        wnav       = $('#navigation').width(),                    // get the width of the navagation area.
        sbwidth    = $sidebar.width();                            // The width of the sidebar.

   //
   // Function:          No Name
   //
   // Description:       This function is for attaching to the windows scroll
   //                    event. Therefore, everytime the window is scrolled
   //                    this function will be called.
   //
   $window.scroll(function() {
      //
      // Determine if we are at the top of the page or not.
      //
      if ($window.scrollTop() > offset.top) {
         //
         // We are past the header area of the page. Therefore, we want to fix the sidebar to the top.
         // Since we are changing from 'absolute' to 'fixed' positioning, we need to calculate the location
         // for the sidebar differently because it is based on browser window size and not HTML page size.
         // Therefore, if the window width is wider than the nav menus, then we need to add half of the
         // extra space to the positioning. Some of this will be theme/page design dependent.
         //

         //
         // Now, get the current widow width.
         //
         var wwidth = $window.width();

         //
         // Calculate the position for the window smaller than the navigation bar. This really
         // just puts the sidebar out of the way of the text. It will end up being off the
         // screen or just at the end of the text.
         //
         var fixedpos = wmain + padwrapper + Padding;

         //
         // If the windows width is larger than the nav menu, take the extra spacing into
         // consideration.
         //
         if(wwidth > wnav) {
            fixedpos += ((wwidth-wnav)/2);
         }

         //
         // Make the CSS for the sidebar flush to the top.
         //
         $sidebar.css( {'top': 0,
                        'position': 'fixed',
                        'left': fixedpos,
                        'width': sbwidth
                       });
      } else {
         //
         // Here, Some of the header is showing. place it just right by putting
         // the values changed back to their original value. Basically, delete
         // css added above.
         //
         $sidebar.css( {'top': '',
                        'position': '',
                        'left': ''
                        });
      }
  });
});

As you can see from the code, most of the code is trying to figure the placement correctly when we change the ‘position’ CSS value to fixed. We have to calculate the distance from the left of the sidebar based on the characteristics of your page theme. This calculation will change from theme to theme. Therefore we will have to change this based on the theme.

Once you have this in the Script Manager, you can create an Action call ‘wp_head’ and insert the code there. That will make the sidebar on every page smoothly scroll. The ‘wp_head’ Action script will look like this:

[CodeInsert lang='JavaScript' name='SidebarScroll' param='']

Or, if you only want one page with the sidebar scrolling, just place the above line in your page or post.

Conclusion

That was an easy fix. Hopefully, all your sidebars will now scroll smoothly. This could easily be made into its own plugin, but using Script Manager gives us more flexibility in its usage. You can see this script in action on this tutorial page, or you can check out Techinch.com to see it in action. On the Techinch.com site, the script was inserted into the ‘wp_head’ Action, but this page has it embedded in this page only.

Related Articles

I developed this article when my son, Matthew Guay, needed help with his website Techinch. The company that handles his ads on the site wanted the ads to always follow the reader. He found a partial solution in these articles:

But, they did not achieve the look that he wanted. I took these ideas and developed this solution for the Techinch website.

comments powered by Disqus