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

Question

有什么方法可以根据背景颜色更改某些元素（即项目符号导航）？ 问题是我的导航点有两种选择。 - 光与暗。 网站分为几部分，有些部分有深色照片，有些部分有白色背景。 有没有一种方法可以使它们根据颜色或仅更改位置来更改类（以了解其属于哪个部分并在该范围内附加类）？

我尝试使用“ 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%'  

    });

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

这是小提琴，它将为您提供有关问题的看法： http : //jsfiddle.net/D7tu5/1/

看看带有较高部分的滚动顶部上的点的行为。 如您所见，向下滚动效果很好，但从底部向上滚动效果不佳。

您可以通过该代码帮助我，还是直接将我引向其他解决方案？ 我已经没有想法了。 预先感谢您，加油！

Answer 1

我整理了以下小提琴，实现了您认为的目标。

http://jsfiddle.net/Ecx2E/1/

它通过在上下两个方向上将航路点设置在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%'
});

通过一些重构，可以使它变得更加整洁，但这应该足以使您朝正确的方向前进。