Sidebar follow screen on scroll

page.html

<div id="wrap">
	<div id="header"></div>
	<div id="inner">
		<div class="wrap">
			<div id="content-sidebar-wrap">
				<div id="content" class="hfeed"></div>
				<div id="sidebar" class="sidebar widget-area"></div>
			</div>
		</div>
	</div>
</div>

<script>
  jQuery(document).ready(function($) {
      var $sidebar = $("#sidebar"); 

      // Check to see if the sidebar is actually defined
      if( $sidebar.length === 0 ) { return; }

      var $window         = $(window),
          $document       = $(document),
          $content        = $('#content'),
          offset          = $sidebar.offset(),
          content_offset  = $content.offset(),
          topPadding      = 20;

      var mp_follow_sidebar = function() {
        var bottom = $content.innerHeight() + content_offset.top - $sidebar.outerHeight() - topPadding;
        if ( $window[0].innerWidth > 1023 && // is the sidebar still on the side?
             $window.scrollTop() < bottom &&
             $window.scrollTop() > offset.top) {
          $sidebar.stop().animate({
            marginTop: $window.scrollTop() - offset.top + topPadding
          },0,'linear');
        }
        // Stop once we hit the bottom
        else if ( $window[0].innerWidth > 1023 && // is the sidebar still on the side?
                    $window.scrollTop() > bottom &&
                    $window.scrollTop() > offset.top) {
          $sidebar.stop().animate({
            marginTop: bottom - offset.top + topPadding
          },0,'linear');
        }
        // Don't move the sidebar till we get scrolling
        else {
          $sidebar.stop().animate({
            marginTop: 0
          },0,'linear');
        }
      };
      
      mp_follow_sidebar();

      $window.scroll(function() {
        mp_follow_sidebar();
      });
  });
</script>