Check if element with class is visible in viewport

Question

I'm trying to detect if a class is currently visible in the viewport. I'm using this answer (can't get a reply to my question). The original post used ID's instead of classes, I've changed it to detect a class called .white-section which is repeated down the page.

At the moment it only detects the first .white-section, how can I get it to detect them all as they come and go into the viewport?

$('#content').scroll(function() {
    var top_of_element = $(".white-section").offset().top;
    var bottom_of_element = $(".white-section").offset().top + $(".white-section").outerHeight();
    var bottom_of_screen = $(window).scrollTop() + $(window).height();
    var top_of_screen = $(window).scrollTop();

    if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
         $('.header-container').addClass('.alt-menu');
    }
    else {
        $('.header-container').removeClass('.alt-menu');
    }
});

This is how the html is setup:

<div class="header-container"></div>

<div class="white-section"></div>
<div class="white-section"></div>
<div class="white-section"></div>
<div class="white-section"></div>
<div class="white-section"></div>

How do the white-section relate to the header-container? My initial thought is this is going to involve an each over the white-sections. — Taplar, Aug 03 '17 at 14:42
@Taplar Sorry I should've been clear on that bit. When I scroll onto a white section, it adds a class to the header container and removes it when it's not on a white section — Rob, Aug 03 '17 at 14:45
Look at [this plugin](https://github.com/customd/jquery-visible). Here is a [demo](http://opensource.teamdf.com/visible/examples/demo-basic.html) — Louys Patrice Bessette, Aug 03 '17 at 14:48
@Taplar Just updated the question. No it's outside of the white section. To explain it a bit better, I have a white menu which gets lost on a white section so I want to reverse the colours when on it. Then revert back to normal when on a non white section. — Rob, Aug 03 '17 at 14:50
@Taplar Yes one header container but multiple white sections — Rob, Aug 03 '17 at 14:54

score 1 · Accepted Answer · edited Aug 03 '17 at 15:15

Give the following a try. It loops over the elements to try to find any that match your conditional and if any do, it adds the class. I also added some slight throttling to the solution and also cached the lookups so that the scroll event will be faster.

(function($) {
  var scrollingIsThrottled = false;
  var $allWhiteSections = $(".white-section");
  var $window = $(window);
  var $headerContainer = $('.header-container');

  $('#content').scroll(function() {
    if (!scrollingIsThrottled) {
      scrollingIsThrottled = true;

      var $whiteSpaceMatchingExpression = $allWhiteSections.filter(function() {
        var $this = $(this);
        var top_of_element = $this.offset().top;
        var bottom_of_element = $this.offset().top + $this.outerHeight();
        var bottom_of_screen = $window.scrollTop() + $window.height();
        var top_of_screen = $window.scrollTop();

        return ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element));
      });
      
      if ($whiteSpaceMatchingExpression.length) {
        $headerContainer.addClass('alt-menu');
      } else {
        $headerContainer.removeClass('alt-menu');
      }
      
      scrollingIsThrottled = false;
    }
  });
}(jQuery));

Check if element with class is visible in viewport

1 Answers1