sticky of section only once reached in elementor

user_1396706 0
Viewed 168

I have tried many different setups, including snap to the page, and sticky with motion effect and I cannot seem to replicate this well at all. I would love to achieve the section to "stick" only once reached and then the content inside to have motion effect of the scroll and once content is done, remove sticky to resume page. The effect I am looking for is very much this effect on this page https://eiger-extreme.mammut.com/en/technology (the blue section) I have done a short screencast of the effect https://www.screencast.com/t/c8P1xsWOfx9q. I'm happy to even use plugins for elementor if needed

elementor css
1 Answers

Looks like the left "sticky" section is just a lot of li-elements stacked on top of eachother? E.g. a very high ul-list. Sorry if I'm totally off here, but you can probably create elements that takes up 100vh (or more) in left column, and then make right section sticky? The animation (fade text in and out, changing right column background-image, and change the graphics in right column) could be done with javascript. This is not a good final approach, but it'll maybe give you some sort of help:

// Just a simple scroll-animation that add class to change bg (not implemented to revert bg when scrolling up again)
document.addEventListener('scroll', function(e) {
    const heading1 = document.querySelector(".heading1").getBoundingClientRect();
    const heading2 = document.querySelector(".heading2").getBoundingClientRect();
    const heading3 = document.querySelector(".heading3").getBoundingClientRect();
    const heading4 = document.querySelector(".heading4").getBoundingClientRect();

    if (heading1.top <= 0 && heading1.top > -100) {
    document.querySelector(".s2c2").classList.add("heading1bg");
  } else if (heading2.top <= 0 && heading2.top > -100) {
    document.querySelector(".s2c2").classList.add("heading2bg");
  } else if (heading3.top <= 0 && heading3.top > -100) {
    document.querySelector(".s2c2").classList.add("heading3bg");
  }

});
body {
  margin: 0;
  color: white;
}

.s1 {
  background-color: red;
  padding: 30px;
  height: 100vh;
}

.s2 {
  display: flex;
  flex-direction: row;
  
}

.s2c1 {
  background-color: blue;
  flex: 1 0 50%;
  padding: 30px;
}

.s2c1 > div {
  margin: 50vh auto;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
}

.s2c2 {
  background-color: green;
  flex: 1 0 50%;
  padding: 30px;
}

.s2c2 > div {
  position: -webkit-sticky;
  position: sticky;
  margin: 50% 0;
  top: 50%;
  text-align: center;
}

.s3 {
  background-color: cadetblue;
  padding: 30px;
  height: 100vh;
}

.heading1bg {
  background-color: chocolate;
  transition: background-color 200ms linear;
  
}

.heading2bg {
  background-color: purple;
  transition: background-color 200ms linear;
  
}

.heading3bg {
  background-color: orange;
  transition: background-color 200ms linear;
}
<div class="container">
  
  <div class="s1">First section</div>
  
  <div class="s2">
    <div class="s2c1">
      <div class="heading1">Heading 1</div>
      <div class="heading2">Heading 2</div>
      <div class="heading3">Heading 3</div>
      <div class="heading4">Heading 4</div>
    </div>
    <div class="s2c2">
      <div>Fixed graphic</div>
    </div>
  </div>
  
  <div class="s3">Last section</div>
  
</div>

Run code snippet in full page for best view

user_60407620
Related