Question

我在左侧有一个容器，用于容纳一个固定高度为1000px的div。我比右边有一个容器来承载常规的模拟内容，以便页面滚动。

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

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

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

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建议的类更改。

Answer 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/

向下滚动达到div的整个高度时，使div停留在页面底部

2 个答案: