Javascript 获取滚动条上可见区域的百分比

在下面的代码段中，如果您在console打开的情况下运行它，您应该会看到，当您滚动时，一旦蓝色div出现在视图中，控制台就会记录“start”，一旦滚动出视图，就会记录“end”

我试图实现的是返回屏幕上显示的数量，以百分比为单位，基于滚动。所以，当它还没有滚动到，它返回0%，当它只是在屏幕上，它是1%，当它滚动过去，它返回100%。我可以计算出文档滚动的百分比，我只是不知道如何处理页面的特定区域。当它滚动过去时，最终淡出那个框，这是我试图做到的效果，但直到它出现在屏幕上才开始淡出

我怎样才能完成这样的事情？我有一种强烈的感觉，我把它复杂化了

控制台打开时的代码笔：

（函数（$）{
变量$box=$（'div'）；
$（窗口）.on（'scroll'，function（）{
变量$win=$（窗口），
rect=$box.get（0）.getBoundingClientRect（），
top=rect.top，
bottom=rect.bottom；
如果（顶部请尝试以下操作：

if (top <= $win.height()) {
    console.log(
      Math.min(100,                  // max 100%
        Math.round(                  // round to integer
          ($win.height() - top)      // distance from the top of window
                                     // to the top of the box
            / rect.height            // divided into the height of the box
          * 100                      // multiply by 100 to get percents
        )
      )
    + "%");                          // add a percent sign
}

if（top试试这个：

if (top <= $win.height()) {
    console.log(
      Math.min(100,                  // max 100%
        Math.round(                  // round to integer
          ($win.height() - top)      // distance from the top of window
                                     // to the top of the box
            / rect.height            // divided into the height of the box
          * 100                      // multiply by 100 to get percents
        )
      )
    + "%");                          // add a percent sign
}

if（top这应该行得通

(function($) {
var $box = $('div');

$(window).on('scroll', function() {
    var $win = $(window),
        rect = $box.get(0).getBoundingClientRect(),
        top = $box.position().top,
        scrollBottom = ($win.scrollTop() + $(window).height()),
        percentValue = Math.max(Math.min(Math.round((scrollBottom - top) / rect.height * 100), 100), 0),
        fadeValue = 1 - (percentValue / 100);
    $box.fadeTo(0, fadeValue);
});
})(jQuery);

这应该行得通

(function($) {
var $box = $('div');

$(window).on('scroll', function() {
    var $win = $(window),
        rect = $box.get(0).getBoundingClientRect(),
        top = $box.position().top,
        scrollBottom = ($win.scrollTop() + $(window).height()),
        percentValue = Math.max(Math.min(Math.round((scrollBottom - top) / rect.height * 100), 100), 0),
        fadeValue = 1 - (percentValue / 100);
    $box.fadeTo(0, fadeValue);
});
})(jQuery);

这到底意味着什么？
当它滚动过去时，最终淡出该框，这是我试图实现的效果，但直到它出现在屏幕上时才开始淡出。
你说的是滚动过去时淡出，因此不可见，但直到它出现在屏幕上时才开始淡出？想象一下，而不是console.logging百分比，您正在应用
.css（'opacity'，percentage）
。所以当你滚动时，一旦元素出现在屏幕上，当你显示更多元素时，它就会开始淡入透明状态，最终在它完全出现在屏幕上时被隐藏。这到底意味着什么？
当它滚动过去时，最终淡出该框，这是我正在尝试的效果，但直到它出现在sc上才开始淡入淡出重新输入。
您说的是滚动过去时淡出，因此不可见，但在屏幕上出现之前不要开始淡出？想象一下，您不是在console.logging上记录百分比，而是在应用
.css（'opacity'，percentage）
。因此，当您滚动时，一旦元素出现在屏幕上，当您显示更多元素时，它就会开始变为透明，最终在完全出现在屏幕上时被隐藏。这正是我想要的，谢谢！不知道为什么会被否决…一个评论良好、简洁的答案。正是我想要的，谢谢！不知道为什么会被否决…一个评论良好、简洁的答案。虽然它在某种程度上是正确的，但不幸的是，它有点不准确。不太清楚为什么。是的，我已经更改了答案。有一些som计算没有按预期工作。虽然它在某种程度上是正确的，但不幸的是，它有点不准确。不太清楚为什么。是的，我已经更改了答案。有som计算未按预期工作