Как реализовать липкий div для адаптивной вёрстки?

$(window).load(function(){
    
        var $rightRkl = $('#rkl-right');
        var $wrap = $('#rkl-start');
        var $wrapH = $wrap.height();
        
    if ($(window).width() > 1220) {
        var $heightRight = $rightRkl.height();
        $rightRkl.wrap("<div style='height:"+ $heightRight +"px'></div>");
        var $fixRight = $rightRkl.offset().top;
        var $rklStop = $('#rkl-stop').offset().top - $heightRight - 20;
        $topPos = $wrapH-$heightRight-20;
        $(window).scroll(function() {
            if ($(this).scrollTop() > $fixRight){  
                $rightRkl.addClass("fixed-top");
                if ($(this).scrollTop() > $rklStop){  
                    $rightRkl.addClass("absolute-top").css({
                        'top' : $topPos
                    });
                  }
                  else{
                    $rightRkl.removeClass("absolute-top").css({
                        'top' : '0'
                    });
                }; 
              }
              else{
                $rightRkl.removeClass("fixed-top");
              };
        });
    };
    
}); 

.fixed-top {position:fixed; top:0; width:275px; margin-bottom:0;}
.absolute-top {position:absolute; width:275px;}
#rkl-start {position:relative;}