在固定的 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" });
    }
});