Add and Remove Classes to Child Elemend when Parent Element Scroll Top Using jQuery

user_16398884 0
Viewed 42

I'm having trouble, the case is:

  1. I have a div with an overflow scroll that becomes the parent of another element
  2. Inside the "parent div" there are several other "div" which when the "parent div" is scrolled up it can add a class to the "child div" inside

an example that I have made is in codepen:

My question is how when I want to add classes to the stacked "child elements" to give CSS styles in order?

because the code is too long, I'm sorry, I'll just include a link to my codepen.

thank you all MY CODEPEN to look around:

$(document).ready(function () {
  $(".kanan").scroll(function () {
    // group 2 start
    if ($(this).scrollTop() > 50) {
      $(".group2").addClass("blue");
      $("#two").addClass("menu");
    } else {
      $(".group2").removeClass("blue");
      $("#two").removeClass("menu");
    }
  });
  //   group 2 end
  //   Group 3 Start
});
::-webkit-scrollbar {
  width: 0;
  height: 0;
}

p {
  font-size:12px;
}

html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
}

.section {
  background-color: black;
  width: 100vw;
  max-width: 100%;
  padding: 1em 16px;
  height:100vh;
}

.wrap {
  width: 1120px;
  max-width: 100%;
  height:100%;

  background-color: #eee;

  margin: 0 auto;

  display: flex;
}
/* KIRI */
.kiri {
  width: 30%;
  background-color: darkcyan;
  padding: 1em;
}
.kiri ul {
  width: 100%;
  margin-left: 0;
  padding-left: 0;
}

.kiri ul li {
  list-style: none;
  padding: 0;
  margin-left: 0;
  padding: 8px 0;
  border-bottom: 1px dashed black;
  transition: 0.5s linear all;
}
/* KANAN */
.kanan {
  width: 70%;
  height: 500px;
  overflow: scroll;
  padding: 24px 16px;
}

.group1,
.group2,
.group3 {
  margin-top: 2em;
  margin-bottom: 2em;
  transition: 0.5s linear all;
}

.group2,
.group3 {
  opacity: 0.1;
}
.items {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.item {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;

  width: calc(100% / 3 - 16px);

  border: 1px solid black;
  border-radius: 10px;

  align-items: center;
  justify-content: center;
  margin: 4px;

  overflow: hidden;
}

.item_kiri {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30%;
  background-color: darkred;
  height: 100%;
}

.item_kiri h2 {
  font-size: 16px;
  line-height: 1;
}

.item_kanan {
  display: flex;
  flex: 1;
  padding: 8px;
}

.blue {
  opacity: 1;
}

.menu {
  background-color: black;
  color: yellow;
  padding: 4px !important;
}

.gas {
  background-color: darkred;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="section">
      <div class="wrap">
        <div class="kiri">
          <ul>
            <li id="one">Oncom</li>
            <li id="two">combro</li>
            <li id="three">misro</li>
          </ul>
        </div>
        <div class="kanan">
          <!-- grup 1 start -->
          <div class="items group1">
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->

            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->

            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->

            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->

            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
          </div>
          <!-- grup 1 end -->

          <!-- grup 2 start -->
          <div class="items group2">
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading Group 2</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading Group 2</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading Group 2</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->

            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading Group 2</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading Group 2</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading Group 2</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->

            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading Group 2</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading Group 2</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading Group 2</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->

            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading Group 2</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading Group 2</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading Group 2</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->

            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading Group 2</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading Group 2</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading Group 2</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
          </div>
          <!-- grup 2 end -->

          <!-- grup 3 start -->
          <div class="items group3">
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading Group 3</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading Group 3</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading Group 3</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->

            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading Group 3</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading Group 3</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading Group 3</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->

            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading Group 3</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading Group 3</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading Group 3</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->

            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading Group 3</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading Group 3</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading Group 3</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->

            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading Group 3</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading Group 3</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
            <!-- item start -->
            <div class="item">
              <div class="item_kiri"><h2>Heading Group 3</h2></div>
              <div class="item_kanan">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Quod.
                </p>
              </div>
            </div>
            <!-- item end -->
          </div>
          <!-- grup 3 end -->
        </div>
      </div>
    </section>

css html jquery javascript
0 Answers
Related