jQuery Waypoints 和更改导航类取决于当前部分

Question

我想根据当前部分更改导航（固定导航）颜色，但被航点卡住。当我调用它时，else 语句永远不会执行。有任何想法吗？

    var mainNav = $('.navigation');
    var section = $('section'),
    white = $("section[data-color='white']"),
    black = $("section[data-color='black']");


    $('section').waypoint(function(){
        if (white) {
            mainNav.removeClass('light');
        }
        else {
            mainNav.addClass('light');
        }

    });

白色和黑色是 jQuery 对象，而不是 HTMLElement。 Waypoints 中的元素选项需要一个普通的 ol' 元素。所以我使用了库提供的 jQuery 扩展。以下是完美的工作。

        var mainNav = $('.navigation');
        var $section = $('section'),
        white = $("section[data-color='white']"),
        black = $("section[data-color='black']");

    white.waypoint({
        handler: function(direction) {
            mainNav.removeClass('light');
            if (direction == 'up') {
                mainNav.addClass('light');
            }
        }
    });

    black.waypoint({
        handler: function (direction) {
            mainNav.addClass('light');
            if (direction == 'up') {
                mainNav.removeClass('light');
            }
        }
    });

Answer 1

else 语句永远不会执行，因为 if() 中的变量永远不会改变“白色”变量始终为真并且等于初始化的值。试试这个：

 var mainNav = $('.navigation');
    var section = $('section'),
    white = $("section[data-color='white']"),
    black = $("section[data-color='black']");


    $('section').waypoint(function(){
        if (this.element == white[0]) {
            mainNav.removeClass('light');
        }
        else {
            mainNav.addClass('light');
        }

    });

这个想法是检查触发你的航点的元素是否等于白色或黑色或......