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

    });

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

这是帮助您查看问题的小提琴：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%'
});

通过一些重构，这可以变得更加清晰，但这足以让你朝着正确的方向前进。

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

1 个答案: