兩個類之間的滾動切換jQuery

默認情況下，我有一個導航欄，它有一個紅色的背景顏色。兩個類之間的滾動切換jQuery

我想要做的是當用戶向下滾動超過100px將背景更改爲藍色，並且他返回0px將背景更改爲默認狀態時。

我想通過在兩個類之間切換來完成此操作，例如<div class="navigation red">應該是默認類，如果用戶向下滾動以添加<div class="navigation blue">並且他再次滾動回<div class="navigation red">。

這裏是我的嘗試：

$(document).ready(function(){ 
    $(window).scroll(function(){ 
    if ($(window).scrollTop() > 100){ 
     $('.navigation').toggleClass("blue"); 
    } 
}); 
});

但是，這是行不通的。這是jsbin。

任何想法如何讓它的工作？

來源

2014-10-05 agis

使用toggleClass()可能是這個錯誤的解決方案。使用addClass/removeClass代替：

if ($(window).scrollTop() > 100){ 
    $('.navigation').addClass("blue"); 
} 
else { 
    $('.navigation').removeClass("blue"); 
}

來源

2014-10-05 14:36:32

的例子當然，這工作，因爲的.blue在CSS後宣佈，但如果它被扭轉，然後它不會。我會建議明確地刪除你不想要的類，並添加你想要阻止的類型 – Lbatson 2014-10-05 14:45:35

它應該足以從中推斷出來。 – 2014-10-05 14:57:40

問題是每次用戶滾動時都會調用toggleClass。此代碼將解決這個問題：

$(document).ready(function(){ 
    $(window).scroll(function(){ 
     if ($(window).scrollTop() > 100 && !$(".navigation").hasClass("blue") || $(window).scrollTop() === 0 && $(".navigation").hasClass("blue"){ 
      $('.navigation').toggleClass("blue"); 
     } 

    }); 
});

的jsbin

來源

2014-10-05 14:36:05 Martin

您可以使用.addClass()和removeClass()像這樣的：http://jsfiddle.net/csdtesting/qhfmw8hx/

$(window).scroll(function() { 
 
    var windowYmax = 100; 
 
    var scrolledY = $(window).scrollTop(); 
 

 
    if (scrolledY > windowYmax) { 
 

 
    $('.navigation').addClass("blue"); 
 
    } else { 
 
    $('.navigation').removeClass("blue"); 
 
    $('.navigation').addClass("red"); 
 
    } 
 
});

.navigation { 
 
    height: 800px; 
 
} 
 
.navigation.red { 
 
    background: red; 
 
} 
 
.navigation.blue { 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="navigation red">scroll me down and up please to see me changing colors...</div>

希望它能幫助！

來源

2014-10-05 14:39:07

你正在加入一個類並刪除另一個類，我會建議在這種情況下使用addClass和removeClass。你也可以鏈接這些方法。

$(document).ready(function(){ 
    $(window).scroll(function(){ 
    if ($(window).scrollTop() > 100){ 
     $('.navigation').addClass('blue').removeClass('red'); 
    } else { 
     $('.navigation').addClass('red').removeClass('blue'); 
    } 
    }); 
});

這裏的jsbin

來源

2014-10-05 14:40:36 Lbatson

試試下面的代碼：

$(document).ready(function() { 
    $(window).scroll(function() { 
     $('.navigation').toggleClass("blue", ($(window).scrollTop() > 100)); 
    }); 
});

下面是jsbin

來源

2014-10-05 14:43:18 NeoMan

兩個類之間的滾動切換jQuery

回答

相關問題