The snippet below is really simple and basically just tests the screen size that the user is viewing the site with and then makes a change to the css dynamically. If you resize the height of your browser window so that the bottom of the browser moves closer to the bottom of the left sidebar you will notice that when you scroll, rather than staying in place the sidebar will move with the rest of the main content - effectively the javascript is switching the position attribute on the #leftCol div from fixed to relative.

Here is the code:

jQuery(document).ready(function() {
     jQuery(window).resize(function() {		 
          if (jQuery(window).height() < 700) {
                 jQuery("#leftCol").css('position', 'relative');
          }
          else {
                 jQuery("#leftCol").css('position', 'fixed');
           }
     }); 
});

If you want to play around with this code in a Zen Grid Framework based template you just need to copy the code above into the js/template.js file of your template. If you already have the document ready syntax in that file then you can remove the first and last lines of the snippet.

The key elements are the height that you want to trigger the change from and the element you want to target. In the example above the screen size is set by the "700" value and the div that gets targeted is the #leftCol.

For a full run down of the css attribute in jQuery its well worth checking out the jQuery documentation and remember that you need to have the jQuery library loading on the page but if you have the JB LIbrary installed then that will be doing that already.