JSFiddle - React, Tailwind, and code Playground

by mannemvamsi

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="container">
    <div class="row">
        <div class="col-xs-6 main-content text-center">
            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

.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;
}

JavaScript

$(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});
        }
    });
})