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.