在固定的 div 上滚动 div

Question

My question is how can I overlap a div over a fixed div on scroll without using a background image.

I want the bottom of the div to match the bottom of the screen to fix that div and make the content (the other divs) below to scroll up (like a parallax effect). Same with if the fixed div is bigger than the screen, as in bigger height (so position sticky won't work).

Here is what I've got so far. I checked if the user scrolled to the div, that I want the scroll effect at and fixed at the bottom. When I'm at that point the content acts like the fixed div doesn't exist and skips it abruptly instead of scrolling in from below. The effect works though when I scroll back up it just skips the fixed div.

I'm trying to achieve something like this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_parallax_percent

But without a background image.

.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");
    }
  }); 

Do you have improvements or any other solutions?

Answer 1

I did a work around, to my problem and now it works as intended. position: fixed; takes the div out of the flow of the DOM so it gets ignored and skipped by the other divs. I just gave the content (the other divs that scroll from below over the fixed div a top margin of the height of the fixed div to work around the position: fixed; change.

$(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" });
    }
});