How do I scroll a div scroll slower than another div

See more:

C#

ASP.NET

Javascript

jQuery

I have, on my webpage, two div o equal size but different z-index:

<div id="Video" runat="server" style="position:absolute; top:70%; left:0%; width:100%; z-index:78;"> </div>

and

<div id="bottom" runat="server" onscroll="OnScrollDiv()" style="position:absolute; top:70%; width:100%; z-index:59; overflow:hidden;"></div>

The top div contains a video tag and the bottom one has simple text and links ;

I want the top div (id= video) to scroll at normal speed but i would like the bottom div (id=bottom) to scroll at half the speed of top div (id=video) so that when the page is scrolled and video scrolls up, text on the bottom page gradually starts showing.

i have added the javascript function:

<script>
           function OnScrollDiv() {
               var video = document.getElementById("Video");
               var bottom = document.getElementById("bottom");
               bottom.scrollTop = video.scrollTop / 2;
           }
      </script>

What I have tried:

i have also tried the jquery:

<script>
            $("document").ready(function () {
                $(window).on('scroll', function(){  
                    $('#bottom').css('top', ($('#Video').height() - $('body').scrollTop() / 2));
                }); 

            })
       </script>

but this also does not work.

Kindly help. Many thanks and regards.