Upon visiting the mentioned website and scrolling down, you may notice that the logo image becomes stuck when transitioning between divs. This issue is likely due to my limited understanding of jQuery. The image is set as fixed using CSS and its fading effect is implemented using jQuery.
If anyone could provide assistance with this matter, it would be greatly appreciated.
<script>
document.getElementById('listen-btn').addEventListener('click', function() {
document.getElementById('music-player').play();
});
$(window).scroll(function() {
if($(window).scrollTop() > $(document).height()*0.5)
document.querySelector('#music-player').pause();
});
$(window).bind("scroll", function() {
if ($(this).scrollTop() > $(document).height()*0.3) {
$("#music-player").fadeIn("slow");
} else {
$("#music-player").fadeOut("slow");
}
});
$(window).bind("scroll", function() {
if ($(this).scrollTop() < $(document).height()*0.2) {
$("#listen-btn").fadeIn("slow");
} else {
$("#listen-btn").fadeOut("slow");
}
});
$(window).bind("scroll", function() {
if ($(this).scrollTop() < $(document).height()*0.39) {
$(".main-logo").fadeIn("slow");
} else {
$(".main-logo").fadeOut("slow");
}
});
</script>