JSFiddle - React, Tailwind, and code Playground

by Kalu Singh Rao

HTML

<div class="wrapper">
    <div class="adsl"><image alt='scoll1-2tieng' src='http://www.maydoduonghuyet.com.vn/uploads/partners/scoll1_2tieng.gif' width='120' height='300' /></div>
<div class="adsr"><image alt='scoll2-hdsd' src='http://www.maydoduonghuyet.com.vn/uploads/partners/scoll2_hdsd.jpg' width='120' height='300'  /></div>

</div>

CSS

.wrapper{
	margin:0 auto;
	width: 500px;
	height: 1600px;
	position:relative;
    background: #FF0004
}
.content {width: 1000px; height: 1200px; overflow: hidden; background: #005CFF}

.adsl{
	position:absolute;
	left:-135px;
	top: 20px;
	border-radius: 5px;
}
.adsl img, .adsr img{
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.adsr{
	position:absolute;
	right:-135px;
	top: 20px;
}

JavaScript

$(document).ready(function() {
   
var sidebar   = $(".adsl");
    var offset    = sidebar.offset();
    var topPadding = 15;
    $(window).scroll(function() {
        if ($(window).scrollTop() > offset.top) {
            sidebar.stop().animate({
                marginTop: $(window).scrollTop() - offset.top + topPadding
            });
        } else {
            sidebar.stop().animate({
                marginTop: 0
            });
        }
    });    
var sidebar2   = $(".adsr");
    var offset2    = sidebar2.offset();
    var topPadding2 = 15;
    $(window).scroll(function() {
        if ($(window).scrollTop() > offset.top) {
            sidebar2.stop().animate({
                marginTop: $(window).scrollTop() - offset.top + topPadding2
            });
        } else {
            sidebar2.stop().animate({
                marginTop: 0
            });
        }
    });   
});