Jquery - Add / Remove CSS class based on scroll position

YasirElahi
July 2, 2023
223 views
2 votes
3 Answers

I want to add class activeclass to a particular outerbox div element when scroll reaches to it. and I also want to remove that class from it and assign it to the next outerbox when scroll reach to that div.

Below is the sample HTML code. and I want you guys to suggest me the jQuery for this.

<div class="outerbox">
    <div class="innerbox">
        content goes here
    </div>
</div>
<div class="outerbox">
    <div class="innerbox">
        content goes here
    </div>
</div>
<div class="outerbox">
    <div class="innerbox">
        content goes here
    </div>
</div>
<div class="outerbox">
    <div class="innerbox">
        content goes here
    </div>
</div>
<div class="outerbox">
    <div class="innerbox">
        content goes here
    </div>
</div>

I want you to please suggest me jQuery code to add & remove CSS class from one to other outerbox div

Tags: jquery

Answers

You could try this sample snippet below and customize as needed.

  .outerbox {
      height: 200px;
      background-color: #f2f2f2;
      margin-bottom: 20px;
    }

    .innerbox {
      padding: 20px;
      color: #333;
    }

    .outerbox.activeclass {
      background-color: #ffcc00;
      border: 2px solid #ff9900;
    }

<body>
<div class="outerbox">
    <div class="innerbox">
        content goes here
    </div>
</div>
<div class="outerbox">
    <div class="innerbox">
        content goes here
    </div>
</div>
<div class="outerbox">
    <div class="innerbox">
        content goes here
    </div>
</div>
<div class="outerbox">
    <div class="innerbox">
        content goes here
    </div>
</div>
<div class="outerbox">
    <div class="innerbox">
        content goes here
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
  var sections = $('.outerbox');
  
  $(window).scroll(function() {
    var currentPosition = $(this).scrollTop();
    var currentSection = null;
    
    sections.each(function() {
      var top = $(this).offset().top;
      var bottom = top + $(this).outerHeight();
      
      if (currentPosition >= top && currentPosition <= bottom) {
        currentSection = $(this);
      }
    });
    
    if (currentSection != null) {
      sections.removeClass('activeclass');
      currentSection.addClass('activeclass');
    }
  });
});
</script>
</body>

You could use document.elementFromPoint() to set the active class for an element is a particular position in the window on scrolling:

$(window).on('scroll', () => {
    const style = getComputedStyle(document.body);
   const elem = document.elementFromPoint(parseInt(style.marginLeft), parseInt(style.marginTop));
   $('.outerbox').removeClass('active');
   $(elem).closest('.outerbox').addClass('active');
});

body{
  margin:50px;
}

.active .innerbox{
  background: #aaccee;
}
.innerbox{
  min-height: 300px;
  transition: background .5s;
}
.outerbox{
  padding:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outerbox active">
    <div class="innerbox">
        content goes here
    </div>
</div>
<div class="outerbox">
    <div class="innerbox">
        content goes here
    </div>
</div>
<div class="outerbox">
    <div class="innerbox">
        content goes here
    </div>
</div>
<div class="outerbox">
    <div class="innerbox">
        content goes here
    </div>
</div>
<div class="outerbox">
    <div class="innerbox">
        content goes here
    </div>
</div>

Don’t use the "scroll" event,
use the preferred tool for the task, and that’s the IntersectionObserver API
Style the .outerbox.is-inViewport { CSS class for the desired changes

const inViewport = (entries, observer) => {
  entries.forEach(entry => {
    entry.target.classList.toggle("is-inViewport", entry.isIntersecting);
  });
};

const Obs = new IntersectionObserver(inViewport);
const obsOptions = {}; //See: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options

// Attach observer to every [data-inviewport] element:
const ELs_inViewport = document.querySelectorAll('.outerbox');
ELs_inViewport.forEach(EL => {
  Obs.observe(EL, obsOptions);
});

* { margin: 0; box-sizing: border-box; }

.outerbox {
  padding: 1rem;
  min-height: 80vh;
  margin: 1rem;
  background: gray;
  transition: background-color 1s ease-in;
}

.outerbox.is-inViewport {
  background: gold;
}

<p style="height: 100vh;">Scroll down...</p>

<div class="outerbox">
  <div class="innerbox">
    content goes here
  </div>
</div>
<div class="outerbox">
  <div class="innerbox">
    content goes here
  </div>
</div>
<div class="outerbox">
  <div class="innerbox">
    content goes here
  </div>
</div>
<div class="outerbox">
  <div class="innerbox">
    content goes here
  </div>
</div>
<div class="outerbox">
  <div class="innerbox">
    content goes here
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – Add / Remove CSS class based on scroll position

Answers