jquery - 当向下滚动达到 div 的全高时，使 div 粘在页面底部

Question

我在左侧有一个容器，其中包含一个固定高度为 1000px 的 div。我在右侧有一个容器，用于托管一般模拟内容，以便页面滚动。

当您向下滚动页面时，您会注意到左侧的 div 有一个图像。当图像结束并且您看到灰色时；你已经达到了容器的全部高度。 (1000 像素)。

当您滚动 div 的整个高度 (1000px) 时，我想做到这一点。然后容器固定在视口(viewport)的底部。让它的下半部分保持在 View 中而不是滚动通过它。基本上左边的灰色永远不应该显示。

我希望这是有道理的。我画了一个 fiddle 让事情变得更容易。

JS FIDDLE

Answer 1

我不确定您是否出于任何原因需要在 jquery 中使用它，但我在 Vanilla JS 中重写了它。它还会为您计算 div 高度。因此，调整窗口或 div 的大小应该会产生相同的效果。

document.addEventListener('scroll', () => {
  let img = document.querySelector('.mgc-img')
  let scrollPos = window.scrollY
  let x = img.clientHeight-window.innerHeight

  if(scrollPos > x) {
    img.classList.add('make-fixed')
  } else if(scrollPos < x) {
    img.classList.remove('make-fixed')
  }
})

已更新 fiddle .如果您在 jquery 中需要它并希望它为您计算 div 高度，您可以使用@EderChrono 代码，只需将 startFixedHeight 变量更改为:

var startFixedHeight = image.height() - window.innerHeight;

编辑:这也需要@EderChrono 建议的类更改。