JSFiddle - React, Tailwind, and code Playground

by shailparas

HTML

<div id="wrapper">

  <div id="mainContent">

    <!--Content for your main div - like a blog post-->

  </div>

  

    <!--Some content in your right column/sidebar-->

    <div id="sticker" >sticker</div>

  

  <div class="clear"></div>

</div>

CSS

div#wrapper {

    margin:0 auto;

    width:400px;
	height:900px;

    background:#FFFF00;

}

div#mainContent {

    width:250px;
    height:560px;

    padding:20px;

    float:left;
	background:#FF00FF;
}

div#sideBar {

    width:230px;

    padding:20px;

    margin-left:30px;

    float:left;

}

.clear { 

    clear:both; 

}

div#sticker {

    padding:2px;

    margin: 0;

    background:#AAA;
position:absolute;
        right:57px;
        top:8px;
        z-index:100;
    

}

.stick {

    position:fixed;
right: 20px;
    top:0px;

}

JavaScript

$(document).ready(function() {

    var sticker = $("#sticker");

    var pos = sticker.position();                    

    $(window).scroll(function(e) {
        var s = $(this).scrollTop(),
            d = $(document).height(),
            c = $(this).height();

        scrollPercent = (s / (d - c));

        var position = (scrollPercent * ($(document).height() - sticker.height()));
        
        sticker.css({
            'top': position
        });
    });

});