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

【问题标题】：Make div stick to the bottom of the page when full height of div is reached on scrolling down当向下滚动时达到 div 的全高时，使 div 粘在页面底部
【发布时间】：2018-11-28 16:06:38
【问题描述】：

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

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

我想在滚动 div 的整个高度（1000 像素）时做到这一点。然后容器固定在视口的底部。使它的下半部分保持在视图中，而不是滚动通过它。基本上不应该显示左侧的灰色。

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

JS FIDDLE

【问题讨论】：

标签： jquery css scroll

【解决方案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 建议的类更改。

【讨论】：

【解决方案2】：

首先你的.make-fixed 类应该包含这样的底部规则：

.make-fixed {
    position:fixed;
    bottom: 0;
}

在您的 JS 代码中，您应该停止切换类，因为这就是导致闪烁发生的原因：

$(window).on('scroll', function () {
    var scrollTop = $(window).scrollTop();
    var image = $('.mgc-img')
    var startFixedHeight = 1000 - window.innerHeight;
    if (scrollTop > startFixedHeight && !image.hasClass('make-fixed')) {
        image.addClass( "make-fixed");
        image.removeClass( "make-absolute" );       
    }
    if (scrollTop <= startFixedHeight && !image.hasClass('make-absolute')) {
        image.removeClass( "make-fixed");
        image.addClass( "make-absolute" );   
    }
});

更新小提琴https://jsfiddle.net/ckud4xLv/5/

【讨论】：

嘿，谢谢！现在我只需要弄清楚如何自动计算高度，以防以后发生变化。非常感谢您的回答！