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%）？

- Peyton Gregory

---

你需要相对于什么来衡量？页面高度吗？ - Paul Sham

是的，我认为是页面高度。如果页面高度为100％，那么页面滚动到一半是否为50％，还是需要将页面高度转换为像素？基本上，一旦滚动条向下滚动了66％，音频就需要停止。 - Peyton Gregory

Answer 1

这是可能的 - 一些算术操作就可以完成。诀窍是使用$(document).height()来检索页面高度。如果你正在引用视口高度，那么你需要使用$(window).height()。

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

- Terry

Answer 2

尝试使用以下代码：

尝试使用以下代码：

$(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);

});

- derogab

---

只是一点小提示：如果你想要在滚动到底部时达到100％，请使用以下代码行：var wh = $(document).height() - $(window).height();。 - Randy