Question

我在滚动时尝试插入一个百分比，因为元素在窗口中移动。

基本上，当元素的顶部与窗口的底部相遇时，返回0％。当元素的底部与窗口的顶部相遇时，返回100％。

到目前为止，我可以使用元素的中间进行插值，但我无法弄清楚如何将它从从顶部和底部开始而不是中间。

$(document).ready(()=>{

  //Element Vars - Test for Element 3
  const $interpolateTarget = $('#element3');
  const elementH = $interpolateTarget.height();
  const elementY = $interpolateTarget.offset().top;

  //Window Vars
  const windowH = $(window).height()
  let scrollY;
  let interpolation;
  let middlePoint;

  $(window).scroll((event)=>{

    scrollY = $(window).scrollTop()
    pctOfWindow = elementH / windowH

    //Calculate middle of element and compare to middle of window
    middleY = elementH / 2 + elementY  - scrollY
    windowMiddleY = windowH / 2
    interpolation = middleY / windowMiddleY / 2

    //Convert to percentage and reverse
    interpolation = (interpolation * 100 - 100 ) * -1

    updateInfo(scrollY, interpolation);
  })
})

非常感谢任何帮助，谢谢！

Answer 1

我认为您需要考虑文档高度而不是窗口高度。以下内容可以为您提供帮助。

updateInfo(scrollY, 100 * $(document).scrollTop() / ($(document).height() - $(window).height()));

$（文档）.scrollTop（）：在整个文档中滚动了多少
$（文档）.height（）：实际文档高度
$（document）.height（） - $（window）.height（）：可滚动文档高度

Answer 2

似乎我想通了，更改了元素H / 2 + elementY - scrollY到elementH + elementY - scrollY

插入元素，因为它滚动窗口

2 个答案: