更改顏色導航Div當它從特定div傳遞時

Question

我想將導航欄切換的顏色從白色更改爲黑色和/或將黑色更改爲白色。

但問題是，當它到達具體的類如「白色」或「黑色」時，滾動開始時顏色會發生變化。

var stickyOffset = $(".navbar-toggle").offset(); 
var $contentDivs = $("section"); 
$(document).scroll(function() { 
    $contentDivs.each(function(k) { 
     var _thisOffset = $(this).offset(); 
     var _actPosition = _thisOffset.top - $(window).scrollTop(); 
     if (_actPosition < (stickyOffset.top + $('.navbar-toggle').height()/2) && _actPosition + $(this).height() - $('.navbar-toggle').height()/2 > 0) { 
      $(".bar1, .bar2, .bar3, .navbar-span").removeClass("white black").addClass($(this).hasClass("white") ? "white" : "black"); 
     } 
    }); 
}); 

現在我的jsfiddle，但它變化非常快，我不知道我做錯了什麼。

http://jsfiddle.net/xarlyblack/8mn4bucw/

預先感謝您！ 最佳， 卡爾

Answer 1

我不知道如果我理解正確的話您的問題，但在我看來，你有你的顏色標籤分配一個邏輯錯誤，我想應該是這樣的：

... 
if (_actPosition < (stickyOffset.top + $('.navbar-toggle').height()/2) && 
    _actPosition + $(this).height() - $('.navbar-toggle').height()/2 > 0) { 
      $(".bar1, .bar2, .bar3, .navbar-span").removeClass("white black") 
      .addClass($(this).hasClass("white") ? "black" : "white"); 
} 
... 

而且here是一個更新的jsfiddle中，我認爲這是正常工作

Answer 2

好像問題出在

$(".bar1, .bar2, .bar3, .navbar-span").removeClass("white black").addClass($(this).hasClass("white") ? "white" : "black"); 

那個地方。它說'如果$（這個）有'白'類添加'白'，否則添加'黑'。應該改變地方。希望能幫助到你！

Answer 3

正如其他人已經指出，在你的jsfiddle中應該切換兩個類，但是如果我正確地理解了你，在初始頁面加載時，類也不匹配，例如，如果你已經向下滾動並創建一個頁面重新加載/刷新，或者你來自錨鏈接。

爲了解決這個問題，我建議你也辦文件加載後這樣的類開關：

var stickyOffset = $(".navbar-toggle").offset(); 
var $contentDivs = $("section"); 
$(document).scroll(function() { 
    checkcolor(); 
}); 

$(document).ready(function() { 
    checkcolor(); 
}); 

function checkcolor() 
{ 
    $contentDivs.each(function(k) { 
     var _thisOffset = $(this).offset(); 
     var _actPosition = _thisOffset.top - $(window).scrollTop(); 
     if (_actPosition < (30 + $('.navbar-toggle').height()/2) && _actPosition + $(this).height() - $('.navbar-toggle').height()/2 > 0) { 
      $(".bar1, .bar2, .bar3, .navbar-span").removeClass("white black").addClass($(this).hasClass("white") ? "black" : "white"); 
     } 
    }); 

} 

我添加的文檔的功能調用準備，並刪除你的stickyOffset變量，因爲在頁面重載/刷新你定位在網站的中間，偏移是方式。您的stickyOffset需要是固定值。我只是說30的默認數量

在這裏看到一個小提琴： http://jsfiddle.net/5gcemfz0/3/