jquery detect overlap multiple sections

Question

I'm trying to make my fixed navigation change color when it overlaps different parts of my website. Much like the navigation on this website: http://andpizza.com/

My html exists of divs and sections.

<nav>
  <ul>
    <li class="work">Work</li>
    <li class="about">About</li>
    <li class="contact">Contact</li>
</nav>

<div id="red">
</div>

<section id="green">
</section>

<div id="blue">
</div>

<section id="yellow">
</section>

For the JS I use an overlaps library I found on github.

This jquery I added myself:

$(document).scroll(function() {

    var contactColl = $('ul li.contact').overlaps('section');
    $('ul li.contact')[contactColl.hits.length? 'addClass' : 'removeClass']('white');

    var aboutColl = $('ul li.about').overlaps('section');
    $('ul li.about')[aboutColl.hits.length? 'addClass' : 'removeClass']('white');

    var workColl = $('ul li.work').overlaps('section');
    $('ul li.work')[workColl.hits.length? 'addClass' : 'removeClass']('white');

});

Or view here on Codepen.

It works perfectly for the first section. But it ignores the second section. I get that it picks the first section it comes across, but I can't figure out how to make it work for the other section(s).

I tried naming the sections separately like this:

var contactColl = $('ul li.contact').overlaps('#green, #yellow');

or

var contactColl = $('ul li.contact').overlaps('#green');
$('ul li.contact')[contactColl.hits.length? 'addClass' : 'removeClass']('white');

var contactColl2 = $('ul li.contact').overlaps('#yellow');
$('ul li.contact')[contactColl2.hits.length? 'addClass' : 'removeClass']('white');

This just broke everything.

Can anybody help me with this?

why do you select the same menu li for two sections - for Yellow and green at the same time? as i got it, one li per one section and then it works like a charm. https://jsfiddle.net/ofvug4nk/ — GL.awog, May 30 '16 at 14:42
It's a matter of readability. The website is an one page website with alternating large images and white sections. When overlapping the image, all menu items should be white, when overlapping the white section, all menu items should be black. Example: http://andpizza.com/ — Paul van den Dool, May 30 '16 at 14:45
this Overlaps plugin doesn't take into account multiple objects to overlap over http://prntscr.com/ba7tx4. now it works as expected https://jsfiddle.net/ofvug4nk/1/ — GL.awog, May 30 '16 at 14:55
@GL.awog it works! Awesome! If you would make this an answer I will accept it. — Paul van den Dool, May 30 '16 at 17:32

score 1 · Accepted Answer · answered May 31 '16 at 07:27

The Overlaps plugin deals with only one object, over which your target overlaps. just little fix like this:

$.fn.overlaps = function(objs) {
    var elems = {targets: [], hits:[]};
    this.each(function() {
        var bounds = $(this).offset();
        bounds.right = bounds.left + $(this).outerWidth();
        bounds.bottom = bounds.top + $(this).outerHeight();

        $(objs).each(function(){
          var obj = this;
          var compare = $(obj).offset();             
          compare.right = compare.left + $(obj).outerWidth();
          compare.bottom = compare.top + $(obj).outerHeight();

          if (!(compare.right < bounds.left ||
                compare.left > bounds.right ||
                compare.bottom < bounds.top ||
                compare.top > bounds.bottom)
             ) {
              elems.targets.push(this);
              elems.hits.push(obj);
          }
        });
    });

    return elems;
};

}(jQuery));

Iterating thru' a collection of objects $(objs).each instead of taking just the first of them - will fix that.

Working demo

You just saved me a big headache and who knows how many hours of coding. Much appreciated! — Paul van den Dool, May 31 '16 at 07:30

jquery detect overlap multiple sections

1 Answers1