Sticky Sidebar

by Zuhaib Siddiqui

HTML

<div class="counter"></div>
    <div class="garbag"></div>
    <aside class="sidebar">
      <div class="sticky">

      </div>
    </aside>
    <section class="content-area">
       <article>

       </article>
    </section>

CSS

body{
        padding: 0;
        margin: 0;
    }
.sidebar{
  width:40%;
  min-height:200px;
  border:4px solid #000;
}
.sticky{
/*  width:100%;*/
  height:200px;
  background-color:blue;
}
.content-area{
  width:60%;
  height:1000px;
  background-color:#f00;
  margin-bottom:600px;
}
.sidebar,
.content-area{
  float:left;
  box-sizing:border-box;
}
.sticky{
    position: absolute;
    left: 0;
    top:0;
}
.garbag{
    width: 100%;
    float: left;
    min-height: 200px;
}
.counter{
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 15px;
    background-color: dodgerblue;
    color: black;
    font-size: 14px;
}

JavaScript

(function($){
            $.fn.extend({
                stickyMenu: function(options){
                    
                    var settings = $.extend({
                        'wrapID': '',
                        'contentID': '',
                        'orientation': $(this).css('float')
                      }, options);
                    
                    var sticky = {
                        'el': $(this),
                        'stickyLeft': $(settings.contentID).outerWidth() + $(settings.contentID).offset.left,
                        'stickyTop': $(settings.wrapID).offset().top,
                        'stickyHeight': $(this).outerHeight(true),
                        'contentHeight': $(settings.contentID).outerHeight(true),
                        'win': $(window),
                        'breakPoint': $(this).outerWidth(true) + $(settings.contentID).outerWidth(true),
                        'marg': parseInt($(this).css('margin-top'), 10)
                      };
                    
                    // Return fuctions
                    return this.each(function() {
                        buildSticky();
                        stickyHeight();
                    });
                    
                    // Build Sticky
                    function buildSticky(){
                       var wrapHeight = sticky.contentHeight;
                        var differv = wrapHeight - sticky.stickyHeight;
                        var getMaxPos = $(window).scrollTop() < (differv + sticky.stickyTop - 1000);
                        
                        var getLessPos = $(window).scrollTop() >= sticky.stickyTop;
                        scrollSticky();
                        
                            $(window).scroll(function(){
                                if($(window).scrollTop() > sticky.stickyTop & $(window).scrollTop() < (differv + sticky.stickyTop - 1000)){                          sticky.el.css({'position':'absolute'});
                ...