JSFiddle - React, Tailwind, and code Playground

by Gourav Singh

HTML

<div id="mydiv" style="width:400px; height:400px; background-color:red;">
               
        </div>

        <div id="etcdiv" style="width:400px; height:400px; background-color:blue;">
               
        </div>

    
        <div id="etcdiv" style="width:400px; height:400px; background-color:green;">
               
        </div>

JavaScript

$(function(){
       
       $(window).scroll(function (){        
            var docViewTop = $(window).scrollTop();
            var docViewBottom = docViewTop + $(window).height();

            var elemTop = $('#mydiv').offset().top;
            var elemBottom = elemTop + $('#mydiv').height();

            if(docViewTop >= elemBottom){
                //calculate new top for your div/player
                var newTop = (($(window).height() - $(window).scrollTop())-$('#mydiv').height());
                $('#mydiv').css({top: newTop, left: 200, position:'absolute'});
            }

        });
       
   })