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對象，而不是HTMLElements。 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語句從未執行，因爲變量中，如果（）永遠不變的「白」變量始終是真實的，是等於什麼被初始化。試試這個：

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

    }); 

的想法是，以檢查是否觸發了您的航點的元素是等於白或黑或....