根據滾動位置有多個樣式更改

Question

我試圖添加多個樣式更改點基於如果我滾動通過某個DIV，我已嘗試修改單個樣式更改腳本，但我有所有嘗試失敗了。

腳本 -

var targetOffset = $("#contentstart").offset().top - 100; 

var $w = $(window).scroll(function(){ 
    if ($w.scrollTop() > targetOffset) { 
     $('.mainnav').css({"background":"#016FBA"}); 
     $('.mainnav').css({"height":"50px"}); 
     $('button.navtoggle').css({"margin":"5px auto"}); 
     $('ul.mainlinks a').css({"color":"#ffffff"}); 
     $('ul.mainlinks a:hover').css({"color":"#000000"}) 
    } else { 
     $('.mainnav').css({"background":""}); 
     $('ul.mainlinks a').css({"color":""}); 
     $('ul.mainlinks a:hover').css({"color":""}); 
     $('.mainnav').css({"height":""}); 
     $('button.navtoggle').css({"margin":""}); 
    } 
}); 

理想我想添加3個風格變化點。

有人能幫我一個忙嗎？

在此先感謝

EDIT（詳細信息） 我想要的導航欄來改變顏色，我通過我的視差網站不同區域滾動。例如，它開始是半透明的，然後一旦我到達關於部分它變成灰色和橙色，那麼這就是問題所在。我希望它也能在我的技能部分，博客部分以及最後在聯繫人部分改變顏色。而我所嘗試的是該腳本的副本，但具有不同的目標div。

Answer 1

所以在回答你的問題，不，我不知道如何編寫多個條件。

那麼，這是我們可以解決的問題。 這是多個條件的語法。

if(condition1){ 
    //gets executed if condition1 is true 
}else if(condition2){ 
    //if condition1 is false but condition2 is true 
}else if(condition3){ 
    //if condition1 and 2 are false but condition3 is true 
}else{ 
    //if none of these conditions are true 
} 

你總是需要一個，如果塊 你可以有很多否則，如果塊，你想 ，並在結束時，你可以有一個可選的else塊

你嵌套條件。

Answer 2

在回答托馬斯 -

var targetOffset = $("#contentstart").offset().top - 100; 
var targetOffset2 = $("#skillset").offset().top; 
var targetOffset3 = $("#mywork").offset().top; 

var $w = $(window).scroll(function(){ 
    if ($w.scrollTop() > targetOffset) { 
     $('.mainnav').css({"background":"#767676"}); 
     $('.mainnav').css({"height":"50px"}); 
     $('button.navtoggle').css({"margin":"5px auto"}); 
     $('ul.mainlinks a').css({"color":"#FFC330"}); 
     $('ul.mainlinks a:hover').css({"color":"#000000"}) 
    } 
    else if($w.scrollTop() > targetOffset2){ 
     $('.mainnav').css({"background":"#fff"}); 
     $('.mainnav').css({"height":"50px"}); 
     $('button.navtoggle').css({"margin":"5px auto"}); 
     $('ul.mainlinks a').css({"color":"#000"}); 
     $('ul.mainlinks a:hover').css({"color":"#000000"}) 
    } 
    else if($w.scrollTop() > targetOffset3){ 
     $('.mainnav').css({"background":"#666"}); 
     $('.mainnav').css({"height":"50px"}); 
     $('button.navtoggle').css({"margin":"5px auto"}); 
     $('ul.mainlinks a').css({"color":"#000"}); 
     $('ul.mainlinks a:hover').css({"color":"#000000"}) 
    }else { 
     $('.mainnav').css({"background":""}); 
     $('ul.mainlinks a').css({"color":""}); 
     $('ul.mainlinks a:hover').css({"color":""}); 
     $('.mainnav').css({"height":""}); 
     $('button.navtoggle').css({"margin":""}); 
    } 
}); 

使用該格式這是我寫的，但是，只有第一個if語句被讀取。

Answer 3

你應該使用elseif不else if

嘗試;

var targetOffset = $("#contentstart").offset().top - 100; 
var targetOffset2 = $("#skillset").offset().top; 
var targetOffset3 = $("#mywork").offset().top; 

var $w = $(window).scroll(function(){ 
    if ($w.scrollTop() > targetOffset) { 
     $('.mainnav').css({"background":"#767676"}); 
     $('.mainnav').css({"height":"50px"}); 
     $('button.navtoggle').css({"margin":"5px auto"}); 
     $('ul.mainlinks a').css({"color":"#FFC330"}); 
     $('ul.mainlinks a:hover').css({"color":"#000000"}) 
    } 
    elseif($w.scrollTop() > targetOffset2){ 
     $('.mainnav').css({"background":"#fff"}); 
     $('.mainnav').css({"height":"50px"}); 
     $('button.navtoggle').css({"margin":"5px auto"}); 
     $('ul.mainlinks a').css({"color":"#000"}); 
     $('ul.mainlinks a:hover').css({"color":"#000000"}) 
    } 
    elseif($w.scrollTop() > targetOffset3){ 
     $('.mainnav').css({"background":"#666"}); 
     $('.mainnav').css({"height":"50px"}); 
     $('button.navtoggle').css({"margin":"5px auto"}); 
     $('ul.mainlinks a').css({"color":"#000"}); 
     $('ul.mainlinks a:hover').css({"color":"#000000"}) 
    }else { 
     $('.mainnav').css({"background":""}); 
     $('ul.mainlinks a').css({"color":""}); 
     $('ul.mainlinks a:hover').css({"color":""}); 
     $('.mainnav').css({"height":""}); 
     $('button.navtoggle').css({"margin":""}); 
    } 
}); 

編輯

，你可以嘗試這樣的話，另一種方法。

var targetOffset = $("#contentstart").offset().top - 100; 
var targetOffset2 = $("#skillset").offset().top; 
var targetOffset3 = $("#mywork").offset().top; 

var $w = $(window).scroll(function(){ 

    if ($w.scrollTop() > targetOffset) { 
     $('.mainnav').css({"background":"#767676"}); 
     $('.mainnav').css({"height":"50px"}); 
     $('button.navtoggle').css({"margin":"5px auto"}); 
     $('ul.mainlinks a').css({"color":"#FFC330"}); 
     $('ul.mainlinks a:hover').css({"color":"#000000"}) 
    }else{ 
     if($w.scrollTop() > targetOffset2){ 
      $('.mainnav').css({"background":"#fff"}); 
      $('.mainnav').css({"height":"50px"}); 
      $('button.navtoggle').css({"margin":"5px auto"}); 
      $('ul.mainlinks a').css({"color":"#000"}); 
      $('ul.mainlinks a:hover').css({"color":"#000000"}) 
     }else{ 
      if($w.scrollTop() > targetOffset3){ 
       $('.mainnav').css({"background":"#666"}); 
       $('.mainnav').css({"height":"50px"}); 
       $('button.navtoggle').css({"margin":"5px auto"}); 
       $('ul.mainlinks a').css({"color":"#000"}); 
       $('ul.mainlinks a:hover').css({"color":"#000000"}) 
      }else{ 
       $('.mainnav').css({"background":""}); 
       $('ul.mainlinks a').css({"color":""}); 
       $('ul.mainlinks a:hover').css({"color":""}); 
       $('.mainnav').css({"height":""}); 
       $('button.navtoggle').css({"margin":""}); 
      } 
     } 
    } 
});