Floating your sidebox between two points, Inspired by Google

I have seen google pagespeed insights floating the mobile or desktop screenshot on the sidebar between only certain points.
I just figured it out how to do it. And here is the tutorial explaning to make your website sidebar widget float between two limits.

In this demo I tried to make social icons stay inside the white box whether you scroll up or down .


Also checkout google apps style navigation and How to offer discounts when user is exiting the website.

Most of the work involved only with javascript(I used jquery). The Javascript steps to achieve floating box is explained below

Sample HTML for the sidebar floating box

<div class="container">
    <div class="row">
        <div class="col-xs-6 main-content text-center" style="font-size:italic;padding-top:160px;font-size:44px;color:#666;font-style:italic;">
            Article On the left Side
        </div>
        <div class="col-xs-6 sidebar text-center">
            <div class="pool">
                <div class="pool-element">
                    <i class="fa fa-facebook fa-3x"></i>
                    <i class="fa fa-twitter fa-3x"></i>
                    <i class="fa fa-google-plus fa-3x"></i>
                </div>
                <div class="pool-end-marker">
                </div>
            </div>
        </div>
    </div>
</div>

CSS for the sidebar floating box

.main-content {
    background-color:#ffffe1;
    height:1200px;
}
.sidebar {
    background-color:#e1ffff;
    height:1200px;
}
.pool {
    position:relative;
    height:300px;
    margin-top:100px;
    border:1px solid #ddd;
    border-radius:4px;
    padding:30px;
    background-color:#fff; 
}
.pool-element {
    max-width:250px;
    width:100%;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}
.fa {
    padding:20px;
}
.fa-google-plus {
    color:#dc4e41;
}
.fa-twitter {
    color:#55acee;
}
.fa-facebook {
    color:#3b5998;
}
.pool-end-marker{
    position:absolute;
    bottom:0;
}

Jquery to achieve floating side box between two points

Case when scrolling down

Check if the scroll position has gone over the floatingbox position, if so move it to scroll position

Case when scrolling up

Check if the floatingbox position is more than scroll position, if so move it again to scroll position

Case when sidebar-limit is reached

Check if the floatingbox position is more than limit position, if so move it to sidebar-limit position

$(function(){
   var initialPos= '';
    $(window).scroll(function() {
        var scrollPos = $(this).scrollTop();
        var poolElement = $('.pool-element');
        var poolEndMarker = $('.pool-end-marker');
        var endPos = poolEndMarker.offset().top - poolElement.height();
        var elementPos = poolElement.offset().top;
        if(!initialPos){
           initialPos = elementPos;
        }
        if(scrollPos > endPos) {
         poolElement.offset({top:(endPos)});
        }
        else if(scrollPos > elementPos) {
           poolElement.offset({top:scrollPos});
        }
        else if (scrollPos > initialPos){
            poolElement.offset({top:scrollPos});
        }
        else {
           poolElement.offset({top:initialPos});
        }
    });
})

Fiddle for the above demo is available here.