Question

当我的网站不同部分重叠时，我试图让我的固定导航更改颜色。与此网站上的导航非常相似：http://andpizza.com/

我的HTML存在div和section。

<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>

对于JS，我使用了在github上找到的overlaps library。

这个jquery我自己补充道：

$(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');

});

或查看here on Codepen。

它适用于第一部分。但它忽略了第二部分。我知道它选择了它遇到的第一部分，但我无法弄清楚如何使其适用于其他部分。

我尝试单独命名这些部分，如下所示：

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

或

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');

这打破了一切。

有人可以帮我吗？

Answer 1

Overlaps插件只处理一个目标重叠的对象。只是很少解决这个问题：

$.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的））;

迭代通过＆＃39;一组对象$（objs）.each而不是只取第一个 - 将解决这个问题。

Working demo

jquery检测重叠多个部分

1 个答案: