Split Screen of half height with half side scrollable

Question

I am trying to make a split screen with half height. I want left side fixed and the right side scrolable, both of them having 50% height. I tried using ScrollMagic and achieved the effect with 100% height but couldn't achieve the effect with half height. I also used position:sticky on left side div but had the same issue.

function splitScroll(){
  const controller = new ScrollMagic.Controller();

  new ScrollMagic.Scene({
    duration: "50%",
    triggerElement: '.au-left',
    triggerHook: 0

  })
  .setPin('.au-left')

  .addIndicators()
  .addTo(controller);
}

splitScroll();

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  /* overflow-x: hidden; */
  /* background-position: 50% 10%;
  background-size: cover; */
}
.aboutus {
  background-color: #1c1b1b;
  color: white;
  font-family: Raleway;
  height: 120vh;
  display: flex;
  overflow-y: hidden;
}


.au-right{
  padding-left: 3%;
  padding-right: 6%;
  height: 120vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 50%;
}

/* .au-right div{
  height: 100vh;
} */

.au-left {
  background-color: pink;
  width: 50%;
  padding-left: 3%;
  padding-right: 3%;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0!important;
  z-index: 0;
}

footer{
background-color: white;
color: black;
}

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="slick.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.js"
    integrity="sha512-UgS0SVyy/0fZ0i48Rr7gKpnP+Jio3oC7M4XaKP3BJUB/guN6Zr4BjU0Hsle0ey2HJvPLHE5YQCXTDrx27Lhe7A=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.js"
    integrity="sha512-judXDFLnOTJsUwd55lhbrX3uSoSQSOZR6vNrsll+4ViUFv+XOIr/xaIK96soMj6s5jVszd7I97a0H+WhgFwTEg=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.js"
    integrity="sha512-mq6TSOBEH8eoYFBvyDQOQf63xgTeAk7ps+MHGLWZ6Byz0BqQzrP+3GIgYL+KvLaWgpL8XgDVbIRYQeLa3Vqu6A=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<section class="aboutus">
    <div class="au-left">
      FIXED SECTION
    </div>

    <div class="au-right">
      SCROLLABLE <BR>
            SCROLLABLE <BR>

      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>
      SCROLLABLE <BR>

    </div>
  </section>
  <footer>
  footer<br>
    footer<br>
      footer<br>
        footer<br>  
        footer<br>
          footer<br>
            footer<br>
              footer<br>
                footer<br>
                  footer<br>  footer<br>  footer<br>
                  </footer>

Answer 1

You can achieve what you want to do using css flexbox without any JavaScript. See the code below.

.container {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: calc(100vh - 20px);
}

section {
  height: 50%;
  overflow: hidden;
  display: flex;
}

footer {
  background: #d4e5f6;
}

.au-left,
.au-right {
  flex: 1;
}

.au-right {
  height: 100%;
  overflow: scroll;
  background: #adadad;
}

.au-left {
  background: #a1b2c3;
}

<link href="./src/styles.css" />
<div class="container">
  <section class="aboutus">
    <div class="au-left">
      FIXED SECTION
    </div>
    <div class="au-right">
      SCROLLABLE <br />
      SCROLLABLE <br />
      SCROLLABLE <br />
      SCROLLABLE <br />
      SCROLLABLE <br />
      SCROLLABLE <br />
      SCROLLABLE <br />
      SCROLLABLE <br />
      SCROLLABLE <br />
      SCROLLABLE <br />
      SCROLLABLE <br />
      SCROLLABLE <br />
      SCROLLABLE <br />
      SCROLLABLE <br />
      SCROLLABLE <br />
      SCROLLABLE <br />
      SCROLLABLE <br />
      SCROLLABLE <br />
      SCROLLABLE <br />
      SCROLLABLE <br />
      SCROLLABLE <br />
      SCROLLABLE <br />
      SCROLLABLE <br />
      SCROLLABLE <br />
      SCROLLABLE <br />
      SCROLLABLE <br />
    </div>
  </section>
  <footer>
    footer<br />
    footer<br />
    footer<br />
    footer<br />
    footer<br />
    footer<br />
    footer<br />
  </footer>
</div>