Display the element once the class enters the viewport

Question

Display the element once the class enters the viewport

I am attempting to display a div only when certain elements with a specific class are visible in the viewport.

I made progress with this example: http://jsfiddle.net/blowsie/M2RzU/

$(document).ready(function(){
    $('.myclass').bind('inview', function (event, visible) {
      if (visible == true) {
        // element is now visible in the viewport
        $(this).removeClass('myclass');
          alert('found h2!')
      } else {
        // element has gone out of viewport
         $(this).addClass('myclass');
      }
    });
});

However, with this revised version: http://jsfiddle.net/deenbag/6D9x5/, the event is triggered each time any element with the class enters or exits the viewport. This means that even if one element is visible, the desired effect may be turned off if another element with the relevant class is not visible.

I also tried using this plugin but couldn't quite get it to work for my specific scenario:

javascript jquery html css viewport

Answer 1

Answer №1

One way to manage visible elements is to store them in an array:

var visibleElements = [];
$('.myclass').bind('inview', function (event, visible) {
    if (visible == true) {
        // element is now visible in the viewport
        if(!~visibleElements.indexOf(this)) visibleElements.push(this);
    } else {
        // element has gone out of viewport
        var index = visibleElements.indexOf(this);
        if(~index) visibleElements.splice(index, 1);
    }
    $('body').toggleClass('red', !!visibleElements.length);
});

Check out the demo here!

Alternatively, you can simplify the process with the following code:

var counter = 0;
$('.myclass').bind('inview', function (event, visible) {
    counter += visible*2-1;
    $('body').toggleClass('red', !!counter);
});

Although this method may introduce more errors.

View the simplified demo here!

Answer 2

One way to manage visible elements is to store them in an array:

var visibleElements = [];
$('.myclass').bind('inview', function (event, visible) {
    if (visible == true) {
        // element is now visible in the viewport
        if(!~visibleElements.indexOf(this)) visibleElements.push(this);
    } else {
        // element has gone out of viewport
        var index = visibleElements.indexOf(this);
        if(~index) visibleElements.splice(index, 1);
    }
    $('body').toggleClass('red', !!visibleElements.length);
});

Check out the demo here!

Alternatively, you can simplify the process with the following code:

var counter = 0;
$('.myclass').bind('inview', function (event, visible) {
    counter += visible*2-1;
    $('body').toggleClass('red', !!counter);
});

Although this method may introduce more errors.

View the simplified demo here!

Answer 3

Answer №2

Due to my limited reputation for commenting, I will provide a possible solution as an answer instead. Have you considered adding a counter to keep track of the elements with the myclass class that are currently "in view"? Each time the "inview" event triggers, you can update the counter. If the counter is 1, you switch on the element; if it's 0, you switch it off; if it's anything else, you do nothing. Check out this jsfiddle for reference.

$(document).ready(function(){
    numInView = 0;
    $('.myclass').bind('inview', function (event, visible) {
      if (visible) {
        numInView++;
      } else {
        numInView--;
      }
      if (numInView === 1) {
        $("h2").removeClass('myclass');
        $('body').css('color','red');
      } else if (numInView === 0) {
        $("h2").addClass('myclass');
        $('body').css('color','black');
      }
    });
});

Tip: When testing a condition, you don't always need to compare it to true unless you're specifically excluding "truthy" values. If the condition is true, it will pass without the explicit comparison to true. For example:

if (visible == true) {
    bar();
} else {
    bazz();
}

is equivalent to

if (visible) {
    bar();
} else {
    bazz()
}

Answer 4

Due to my limited reputation for commenting, I will provide a possible solution as an answer instead. Have you considered adding a counter to keep track of the elements with the myclass class that are currently "in view"? Each time the "inview" event triggers, you can update the counter. If the counter is 1, you switch on the element; if it's 0, you switch it off; if it's anything else, you do nothing. Check out this jsfiddle for reference.

$(document).ready(function(){
    numInView = 0;
    $('.myclass').bind('inview', function (event, visible) {
      if (visible) {
        numInView++;
      } else {
        numInView--;
      }
      if (numInView === 1) {
        $("h2").removeClass('myclass');
        $('body').css('color','red');
      } else if (numInView === 0) {
        $("h2").addClass('myclass');
        $('body').css('color','black');
      }
    });
});

Tip: When testing a condition, you don't always need to compare it to true unless you're specifically excluding "truthy" values. If the condition is true, it will pass without the explicit comparison to true. For example:

if (visible == true) {
    bar();
} else {
    bazz();
}

is equivalent to

if (visible) {
    bar();
} else {
    bazz()
}

Display the element once the class enters the viewport

Answer №1

Answer №2

Similar questions

What strategies can be employed to prevent the need for custom classes for each individual paragraph or list item in order to maintain consistent styles within a

Ways to efficiently implement configuration settings in a functional approach

CSS <ul> <li> spacing issue in Internet Explorer 7

Utilize jQuery to load AngularJS libraries into your web application

Utilizing React Router Dom to Showcase Home Route from a Sub-Route

The map markers are nowhere to be found on the map when using Internet Explorer

Autonomous boundary for list elements

What is the best way to convert an ajax get request into a post request using jQuery?

Using Jquery to ensure that the Ajax call finishes before proceeding

Extract a specific pattern from a string using Javascript

`Angular Image Upload: A Comprehensive Guide`

What is the best way to ensure a dropdown menu stays visible while navigating through various If/Else blocks?

Create a new list in Rails 6 that dynamically updates based on the selection made in the first list

Press on the button that is currently in your field of view

How can I get an object returned from a Mongoose find method in NodeJS?

Is there a way in Angular to activate the contenteditable feature through a controller?

Smooth scrolling feature malfunctioning in mobile view

Can I link the accordion title to a different webpage?

How can I line up elements in different divs when the width is adjusting based on the window size?

Exploration of Non-height Divs