Sidebar not fixing properly with jquery ".css" function. #solved

Sidebar not fixing properly with jquery ".css" function. #solved

Hi, in search for a fixed sidebar jQuery code, I found this tutorial , which has this fiddle example . The html , css and js codes are very simple, and while kept simple it works fine. Though, when I tried to insert it in my sandbox project , something goes wrong. Within my project selectors specifications, the  js script goes like this:
  1. jQuery(document).ready(function () {
  2.     var length = jQuery('.product-shop').height() - jQuery('#sidebar').height() + jQuery('.product-shop').offset().top;
  3.     jQuery(window).scroll(function () {
  4.         var scroll = jQuery(this).scrollTop();
  5.         var height = jQuery('#sidebar').height() + 'px';
  6.         if (scroll < jQuery('.product-shop').offset().top) {
  7.             jQuery('#sidebar').css({
  8.                 'position': 'absolute',
  9.                 'top': '0'
  10.             });
  11.         } else if (scroll < length) {
  12.             jQuery('#sidebar').css({
  13.                 'position': 'absolute',
  14.                 'bottom': '0',
  15.                 'top': 'auto'
  16.             });
  17.         } else {
  18.             jQuery('#sidebar').css({
  19.                 'position': 'fixed',
  20.                 'top': '0',
  21.                 'height': height
  22.             });
  23.         }
  24.     });
  25. });
But, as you can see in my sandbox, when the page is rendered and when the user scrolls down, the "else" statement seems to be ignored, not fixing the sidebar. The project is running on magento and bootstrap.

Any clue on where is the problem?