Scrolly side-by-side

index.html

    <style>
      .scrolly-side-by-side {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 1rem;
      }

      .scrolly-side-by-side > * {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
      }

      .scrolly-side-by-side #steps {
        position: relative;
        padding: 0 1rem;
        max-width: 550px;
      }

      .scrolly-side-by-side .sticky-item {
        position: -webkit-sticky;
        position: sticky;
        width: 100%;
        margin: 0;
        z-index: 0;
        top: 0vh;
        height: 100vh;
        /* Center everything inside */
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .scrolly-side-by-side .sticky-item img {
        max-width: 600px;
      }

      .scrolly-side-by-side .step {
        margin: 0 auto 90vh auto;
        background: #fff;
        border-radius: 5px;
        border: 1px solid rgba(0,0,0,.5);
        font-family: Graphik, sans-serif;
        padding: 1.5rem 2rem;
        line-height: 1.44rem;
      }

      .scrolly-side-by-side .step p {
        margin: 0px;
      }

      .scrolly-side-by-side .step:first-child {
        margin-top: 100vh;
      } 

      .scrolly-side-by-side .step:last-child {
        margin-bottom: 25rem;
      }
      
    

      @media screen and (max-width: 1000px) {
        .scrolly-side-by-side {
          display: block;
        }
        .scrolly-side-by-side .step:first-child {
          margin-top: 0vh;
        } 
        .scrolly-side-by-side #steps {
          margin: auto;
        }
      }
      
      
    </style>
 

     

      <section id="scrolly-2" class="scrolly-side-by-side scroll-item">
        <div class="sticky-item">
          <img src="http://propublica.s3.amazonaws.com/projects/asbestos/organs_0.jpg">
        </div>
        <div id="steps" class="scrolly-text">
          <div class='step'>
            <strong>Esophagus</strong>
            <p>Swallowed asbestos fibers can lodge in the esophagus and cause cancer.</p>
          </div>
          <div class='step'>
            <strong>Lungs</strong>
            <p>Inhaled asbestos fibers can get trapped deep in the lungs. This can lead to inflammation and scarring and can result in chronic coughing, chest pain and a lung disease called asbestosis.</p>
          </div>
          <div class='step'>
            <strong>Lung Lining</strong>
            <p> Asbestos fibers can also build up on the lining of the lungs, which may result in mesothelioma, a type of cancer.</p>
          </div>
          <div class='step'>
            <strong>Heart</strong>
            <p>Damage to the lungs can lower flow to the heart, causing enlargement or even heart failure.</p>
          </div>
          <div class='step'>
            <strong>Stomach and intestines</strong>
            <p>Ingested asbestos fibers can build up over time and cause cancer in the stomach or intestines.</p>
          </div>
        </div>

        
      </section>

    


    <script src="https://unpkg.com/scrollama"></script>
    <script>

       document.addEventListener("DOMContentLoaded", function() {

        const scrollys = document.querySelectorAll(".scroll-item");
        
        scrollys.forEach(function (item) {

          const scrollySteps = item.querySelectorAll(".scrolly-text .step");

          // initialize scrollama
          const scroller = scrollama();
          scroller
            .setup({
                step: scrollySteps,
                offset: 0.9,
            })
            .onStepEnter(handleStepEnter)

            window.addEventListener("resize", scroller.resize);

            function handleStepEnter(response) {
              let num = response.index+1 
              let url = "http://propublica.s3.amazonaws.com/projects/asbestos/organs_"
              item.querySelector("img").src = url+num+".jpg"
            }


        });

      });

    </script>
  </body>
</html>