特定のスクロールに達したときにヘッダーの色を変更しようとしています。このスクリプトを jQuery で使用します。
var $document = jQuery(document),
$element = jQuery('#header'),
className = 'red';
$document.scroll(function() {
$element.toggleClass(className, $document.scrollTop() >= 400);
});
これは、IE8 を除くすべてのブラウザーで機能します。IE8 は toggleClass をサポートしていませんか? どうすれば解決できますか？
どんな助けでも大歓迎です。ありがとう
jsFiddle: http://jsfiddle.net/itzuki87/e4XTw/
IE の場合: http://jsfiddle.net/itzuki87/e4XTw/show/
問題は$(document)、IE では読み方が異なることです。IE では、 を使用することをお勧めします$(window)。以下は、ブラウザ間の互換性がはるかに高いことがわかります。
$(function() {
$(window).scroll(function(e) {
$("#header").toggleClass("red", $(this).scrollTop() >= 400);
});
})
または、変数タイプのセットアップを使用します。
jQuery(function() {
var $window = jQuery(window),
$element = jQuery("#header"),
className = "red";
$window.scroll(function(e) {
$element.toggleClass(className, jQuery(this).scrollTop() >= 400);
});
})