jQuery scrollTop() 位置百分比

Question

<script>
document.getElementById('listen-btn').addEventListener('click', function() {
    document.getElementById('music-player').play();
});

<script>
    $(window).scroll(function() {
        if($(window).scrollTop() > 1400)
        document.querySelector('#music-player').pause();
    });
</script>

该按钮启动音频播放器并滚动到音频播放器可见的部分。当您滚动下一部分时，一旦滚动 1400，音频播放器就会停止，但我需要它是相对的。如何让 1400 成为百分比 (50%)

Answer 1

尝试使用此代码：

$(window).on('scroll', function() {
   var st = $(this).scrollTop();
   var wh = $(document).height();

// st : wh = X : 100
// x = (st*100)/wh

var perc = (st*100)/wh

// Your percentage is contained in perc variable

console.log('The percentage is '+perc);

});

Answer 2

这是可能的——一些算法就可以完成这项工作。诀窍是使用 $(document).height() 检索页面高度。不过，如果您指的是视口高度，则需要使用 $(window).height()。

$(window).scroll(function() {
    if($(window).scrollTop() > $(document).height()*0.5)
    document.querySelector('#music-player').pause();
});

jQuery scrollTop() 位置百分比

jQuery scrollTop() position to percentage

javascript

jquery

scrolltop