我在左侧有一个容器,其中包含一个固定高度为 1000px
的 div。我在右侧有一个容器,用于托管一般模拟内容,以便页面滚动。
当您向下滚动页面时,您会注意到左侧的 div 有一个图像。当图像结束并且您看到灰色时;你已经达到了容器的全部高度。 (1000 像素)。
当您滚动 div 的整个高度 (1000px) 时,我想做到这一点。然后容器固定在视口(viewport)的底部。让它的下半部分保持在 View 中而不是滚动通过它。基本上左边的灰色永远不应该显示。
我希望这是有道理的。我画了一个 fiddle 让事情变得更容易。
最佳答案
我不确定您是否出于任何原因需要在 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 建议的类更改。
关于jquery - 当向下滚动达到 div 的全高时,使 div 粘在页面底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53512749/