jQuery雙條件語句 - 滾動高度或寬度做到這一點

Question

我想解決如何讓一個函數在屏幕滾動到某個點時改變一些css，或者瀏覽器窗口縮小到一定的大小。

個別我有每個工作，但一個覆蓋另一個時，我跟着一個。

這裏就是我與大氣壓工作：

$(window).scroll(function() { 
    var height = $(window).scrollTop(); 

    if(height > 300){ 
    $('.navbar-default .nav li a').css("color","#f6f6f6"); 
    } 
    else{ 
    $('.navbar-default .nav li a').css("color","#4B00B3"); 
    } 
}); 

$(window).resize(function() { 
    var width = $(window).width(); 

    if(width < 768) { 
    $('.navbar-default .nav li a').css("color","#f6f6f6"); 
    } 
    else{ 
    $('.navbar-default .nav li a').css("color","#4B00B3"); 
    } 
}); 

所以我想只是有導航欄字體是灰色（＃f6f6f6）在爲300px滾動，當畫面超出768px寬。否則會變成深紫色（＃4B00B3）。

我試過將這些結合起來，但我不確定如何將.resize和.scrollTop事件與||正確結合。條件陳述。

任何幫助，非常感謝。

Answer 1

您可以將它們組合成一個函數，然後將該函數傳遞給調整大小和滾動事件。

var navbarDefault = $('.navbar-default .nav li a'); 

$(window).resize(toggleColor).scroll(toggleColor); 

function toggleColor(){ 
    var height = $(window).scrollTop(); 
    var width = $(window).width(); 

    if(width < 768 || height > 300) { 
     navbarDefault.css("color","#f6f6f6"); 
    } 
    else { 
     navbarDefault.css("color","#4B00B3"); 
    } 
}