Javascript 如何使导航对背景颜色做出反应

是否有任何方法可以根据背景颜色更改某些元素（即项目符号导航）？问题是我的导航是由有两个类可供选择的点组成的。-光明与黑暗。网站分为几个部分，有些部分有深色照片，有些部分有白色背景。有没有一种方法可以让他们根据颜色改变类别，或者只是改变位置（知道它是什么部分，并在该范围内附加类别）

我尝试使用“waypoints”jquery插件来实现这一点，并得出了以下代码：

var section = $('section'),
    dots = $('#dots');


section.waypoint(function(direction) {

    if (direction === 'down') {

        var sectionId = $(this).attr('id');

        $('a').removeClass('active');

        var $href = '#' + $(this).attr('id'),
            $anchor = $("a[href='" + $href + "']");

        $anchor.addClass('active');

        if( sectionId == 'home' || sectionId == 'product' || sectionId == 'contact' ) {

            dots.removeClass('dots-dark').addClass('dots-light');

        } else {

            dots.removeClass('dots-light').addClass('dots-dark');

        }

    }

}, {

    offset: '50%'

    }).waypoint(function(direction) {

      if (direction === 'up') {

        var sectionId = $(this).attr('id');

        $('a').removeClass('active');

        var $href = '#' + $(this).attr('id'),
            $anchor = $("a[href='" + $href + "']");

        $anchor.addClass('active');

        if( sectionId == 'home' || sectionId == 'product' || sectionId == 'contact' ) {

            dots.removeClass('dots-dark').addClass('dots-light');

        } else {

            dots.removeClass('dots-light').addClass('dots-dark');

        }

     }

    }, {
      offset: '-50%'  

    });

问题是它只是在部分的上部触发并向下滑动，所以我在上面编写了代码，以便在上下滚动时产生不同的偏移量。它似乎只有在元素不高于窗口时才起作用，否则它只会在其他地方触发

这是一把小提琴，可以让你对这个问题有一个看法：

看看上面的点在更高的部分滚动时的表现。正如您所看到的，向下滚动效果很好，但从底部向上滚动则不行

---

你能帮我写代码吗，或者直接告诉我其他的解决方案？我已经没有什么想法了。谢谢大家，干杯

我已经准备好了下面这把小提琴，它达到了我认为你想要的效果

它通过在上下方向的50%标记处设置路线点来工作。这不是最模块化的逻辑，但它在这种情况下工作。理想情况下，我们会检测每个点何时进入新区域，并相应地改变其颜色

$("section").waypoint(function(direction) {
    background = $(this).css('background-color');
    if (direction === 'down') {
        // Scrolling down
        if (background == 'rgb(0, 0, 0)') {
            $("#dots a").css('background-color', '#FFFFFF');
        } else {
            $("#dots a").css('background-color', '#000000');
        }
    }
},{
    offset: '50%'
}).waypoint(function(direction) {
    background = $(this).css('background-color');
    if (direction === 'up') {
        // Scrolling up
        if (background == 'rgb(255, 255, 255)') {
            $("#dots a").css('background-color', '#FFFFFF');
        } else {
            $("#dots a").css('background-color', '#000000');
        }
    }
},{
    offset: '50%'
});

---

通过一些重构，这可能会变得更干净，但这应该足以让您朝着正确的方向前进。

请分别为HTML提供一个JSFIDLE。使用介于两种背景色之间的中灰色阴影。在代码中添加了FIDLE。