在固定的 div 上滚动 div

Question

我的问题是如何在不使用背景图像的情况下将 div 重叠在滚动的固定 div 上。

我希望 div 的底部与屏幕底部匹配以修复该 div 并使下面的内容（其他 div）向上滚动（如视差效果）。 如果固定 div 比屏幕大，则相同，因为高度更大（因此 position 粘滞将不起作用）。

这是我到目前为止所得到的。 我检查了用户是否滚动到 div，我希望滚动效果固定在底部。 当我在那个时候，内容就像固定的 div 不存在一样，突然跳过它而不是从下面滚动。 虽然当我向上滚动时它只是跳过固定的 div，但效果有效。

我正在尝试实现这样的目标： https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_parallax_percent

但是没有背景图像。

.background-beige {
  width: 100%;
  background-color: #f8f8f8;
  padding-bottom: 200px !important;
}

.contact-banner-wrapper {
  height: 436px;
  background-color: #c22a40;
  position: relative;
}


  $(window).scroll(function (e) {
    var el = $(".contact-banner-wrapper");
    var elem = $(".background-beige");
    if (
      $(window).scrollTop() >=
      elem.offset().top  + elem.outerHeight() - window.innerHeight 
    ) {
      elem.css({ position: "fixed", bottom: "0px"});

    }
    if ($(this).scrollTop() < 200) {
      elem.css({ position: "static"});

      console.log("reset");
    }
  }); 

您有改进或任何其他解决方案吗？

Answer 1

我解决了我的问题，现在它按预期工作了。 position: fixed; 将 div 从 DOM 流中取出，因此它会被其他 div 忽略和跳过。 我只是给内容（从固定 div 下方滚动的其他 div 固定 div 高度的顶部边距，以解决position: fixed;更改。

$(window).scroll(function (e) {
    var scrollOverContent = $(".contact-banner-wrapper");
    var fixedDiv = $(".contact-banner-wrapper").prev();

    var heightFixedDiv = fixedDiv.outerHeight();

    if (
      $(window).scrollTop() >=
      fixedDiv.offset().top + fixedDiv.outerHeight() - window.innerHeight
    ) {
      fixedDiv.css({ position: "fixed", bottom: "0px", zIndex: "0" });
      scrollOverContent.css("margin-top", heightFixedDiv);
    }
    if (
      $(window).scrollTop() <
      scrollOverContent.offset().top - $(window).height()
    ) {
      fixedDiv.css({ position: "static" });
      scrollOverContent.css({ marginTop: "0" });
    }
});