Apply a class to an element as it comes into view 100 pixels before scrolling past it

Question

Apply a class to an element as it comes into view 100 pixels before scrolling past it

I need help adding a specific class to an element (class abc) when it is 100px below the top of the viewport. Currently, the class is being added to all divs instead of individual elements. Any advice on how to fix this?

$(function() {
  $(document).scroll(function() {
    if ($(this).scrollTop() >= $('.abc').offset().top - 100) {
      $(".abc").addClass("color");
    } else {
      $(".abc").removeClass("color");
    }
  });
});

#header {
  height: 150px;
}

.abc {
  background-color: orange;
}

.color {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
  <h1>Header</h1>
</div>
<div class="abc">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
  vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
  Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>
<div class="abc">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
  vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
  Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>
<div class="abc">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
  vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
  Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>
<div class="abc">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
  vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
  Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>
<div class="abc">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
  vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
  Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>

javascript jquery html css

Answer 1

Answer №1

Your approach is correct when checking a single element, but in order to apply this to a collection, you'll need to iterate through each element and evaluate its position individually. Here's an example of how you can achieve that:

$(function() {
  $(document).scroll(function() {
    var scrollTop = $(this).scrollTop();
    
    $('.abc').each(function() {
      $(this).toggleClass('color', scrollTop >= $(this).offset().top - 100);
    });
  });
});

#header { height: 150px; }
.abc { background-color: orange; }
.color { background-color: blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
  <h1>Header</h1>
</div>

<!-- Several div elements with the class "abc" and Lorem Ipsum text -->

Answer 2

Your approach is correct when checking a single element, but in order to apply this to a collection, you'll need to iterate through each element and evaluate its position individually. Here's an example of how you can achieve that:

$(function() {
  $(document).scroll(function() {
    var scrollTop = $(this).scrollTop();
    
    $('.abc').each(function() {
      $(this).toggleClass('color', scrollTop >= $(this).offset().top - 100);
    });
  });
});

#header { height: 150px; }
.abc { background-color: orange; }
.color { background-color: blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
  <h1>Header</h1>
</div>

<!-- Several div elements with the class "abc" and Lorem Ipsum text -->

Answer 3

Answer №2

Perhaps we can attempt something along these lines.

 $('.abc').each(function(){ //Iterate through each .abc element
   if($(window).scrollTop() >= $(this).offset().top - 100) { //Check if it is within the offset range
      $('.abc').removeClass("color"); //Remove all color classes
      $(this).addClass("color"); //Add color class to the current .abc element
   } 
 })

Please let me know if this solution works. You can view an example here.
Best regards!

Answer 4

Perhaps we can attempt something along these lines.

 $('.abc').each(function(){ //Iterate through each .abc element
   if($(window).scrollTop() >= $(this).offset().top - 100) { //Check if it is within the offset range
      $('.abc').removeClass("color"); //Remove all color classes
      $(this).addClass("color"); //Add color class to the current .abc element
   } 
 })

Please let me know if this solution works. You can view an example here.
Best regards!

Apply a class to an element as it comes into view 100 pixels before scrolling past it

Answer №1

Answer №2

Similar questions

Issues with HTML5 video playback have been reported in both Chrome and Firefox browsers

Having difficulty manually concealing the launch image on the physical device

Ways to delay the execution of a loop using setTimeout or setInterval

Error message encountered when attempting to process json-encoded JavaScript using Ajax

When using Node.js and geth together, running JavaScript code may lead to the creation of zombie processes, causing the

Utilizing SVG within Sproutcore allows for seamless access to DOM nodes and the ability to effortlessly bind Sproutcore events directly to the DOM

Setting up a specific print media query for the body element through JavaScript

Troubleshooting the malfunctioning Bootstrap Dropdown Navbar in Rails 6

Update the color of a span in JQuery when its value equals 0

Tips for hovering over a link with Webdriver

Steps for disabling and collapsing an individual header on the JQuery Accordian

Utilizing Pusher to transfer user deposit and withdrawal information from client to Node.js (Express) server: A step-by-step guide

Encountering a glitch while attempting to execute my test on webdriverio

Utilizing jQuery and ajax to send emails within WordPress

Reloading specific content on an ASP.NET CORE Razor Pages website

Selecting Jquery Mobile Option from JSON Data

Adaptive scrolling backdrop

Creating a vertical loop animation for a cube in Three.js

I'm having trouble displaying the partial view called by my action in ajax.beginform. Why isn't it showing up on the page

The success function of the ajax request is not initiating until I halt the page