<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div id="oh" class="demo-dot" style="position: absolute; bottom: 0; right: 0; background: red; width:100px; height: 100px;"></div> <div id="yeah" class="demo-dot" style="position: absolute; top: 0; left: 0; background: red; width:100px; height: 100px;"></div> </div> <br><br><br><br><br><br> <div class="container" id="second-container"> <div id="commom" class="demo-dot" style="position: absolute; top: 0; right: 0; background: blue; width:100px; height: 100px;"></div> <div id="baby" class="demo-dot" style="position: absolute; top: 0; left: 0; background: green; width:100px; height: 100px;"></div> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

.container{ position: relative; width: 100%; height: 400px; }

jQuery(document).ready( function() { var $w = $(window); var $d = $('#oh'); var $y = $('#yeah'); var $c = $('#commom'); var $b = $('#baby'); var lastScrollTop = $w.scrollTop(); var _x = 0; var _y = 0; $(window).scroll(function(event) { var st = $w.scrollTop(); _x = st; _y = st; lastScrollTop = st; $d.css('right', _x); $d.css('bottom', _y); $y.css('left', _x); $y.css('top', _y); //----------- var $myElement = $('#second-container'), canUserSeeIt = inViewport($myElement); if(canUserSeeIt){ $c.css({'right': _y}); $b.css({'left': _x}); } }); //check if el is visible in viewport function inViewport($ele) { var lBound = $(window).scrollTop(), uBound = lBound + $(window).height(), top = $ele.offset().top, bottom = top + $ele.outerHeight(true); return (top > lBound && top < uBound) || (bottom > lBound && bottom < uBound) || (lBound >= top && lBound <= bottom) || (uBound >= top && uBound <= bottom); } });