2016-06-18 8 views
4

ここで初めて質問をします。 質問で検索しましたが、同様の問題は見つかりませんでした。addClass removeClass not working

ブラケットにbootstrap3という企業Webサイトを構築しています。私は物事がクロムとサファリの最新バージョンで動作するかどうかをチェックします。

JQuery addClassとremoveClassを使用してナビゲーションバーの高さを小さくして背景色を変更しようとしていますが、動作していないようです。 JQuery経由でCSSプロパティを変更すると動作します。私は背景色を変えることができます。 Jqueryで複数のCSSプロパティを変更しようとしましたが、うまくいきませんでした。私は背景色を変更することができます。

$(document).ready(function() { 
 
    $(window).scroll(function() { 
 
    if ($(window).scrollTop() > 50) { 
 
     $("#top-bar").addClass('animated-header'); 
 
    } else { 
 
     $("#top-bar").removeClass('animated-header'); 
 
    } 
 
    }); 
 

 
    $("#clients-logo").owlCarousel({ 
 
    itemsCustom: false, 
 
    pagination: false, 
 
    items: 5, 
 
    autoplay: true, 
 
    }) 
 

 
}); //this is the part doesn't work 
 

 
$(document).ready(function() { 
 
    $(window).scroll(function() { 
 
    if ($(window).scrollTop() > 50) { 
 
     $("#top-bar").css("background-color", "#ef7c7c"); 
 
    } else { 
 
     $("#top-bar").css("background-color", "transparent"); 
 
    } 
 
    }); 
 

 
    $("#clients-logo").owlCarousel({ 
 
    itemsCustom: false, 
 
    pagination: false, 
 
    items: 5, 
 
    autoplay: true, 
 
    }) 
 
}); //this part works perfectly
#top-bar { 
 
    background: transparent; 
 
    color: #fff; 
 
    -webkit-transition: all 0.2s ease-out 0s; 
 
    transition: all 0.2s ease-out 0s; 
 
    padding: 30px 0; 
 
    height: 15%; 
 
} 
 
#top-bar .animated-header { 
 
    /*Background Color of nav bar when scrolled*/ 
 
    background-color: #ef7c7c; 
 
    padding: 10px 0; 
 
    height: 10%; 
 
    -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1); 
 
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1); 
 
}
<header id="top-bar" class="navbar-fixed-top animated-header"> 
 
    <div class="container">

あなたの助けをありがとうございました!

答えて

4

はあなたのCSSコードに誤りがあります。

#top-bar .animated-header 
    /* ^  
     Here the typo, you specified this properties to 
     element, that will be a children of a #tob-bar 
     element 
    */ 

だから、ここ右1:

#top-bar.animated-header 
+0

ありがとうございます!大括弧でファイルのエラーをチェックする方法はありますか?私はそれが問題だったことを知らずに数週間のように書いてきました.... –

+0

これはエラーではありません、これはちょうどタイプミスです、あなたはちょうどセレクターと混同されています。 – wrongway4you

+0

しかし、エラーをチェックしたいのであれば、Sublime TextやAtomのようなプラグインを使ってコードを書いたり、エディタでコードを完全に理解したければIDE(Visual Studio、Intellij Idea、PyCharm ) – wrongway4you

9

問題は、.addClass()を使用しているJSではなく、CSSのセレクタが間違っているという問題があります。これ:

#top-bar.animated-header { 

すなわち、空間とセレクタ子孫#top-barあるクラスanimated-header持つ要素に一致されているので.前にスペースを削除:

#top-bar .animated-header { 

このあるべき。 がない場合は、#top-bar要素と一致します。animated-headerクラスの場合は、その要素自体に一致します。

+0

Ohhhhhhh GOSH私、そんなにありがとう!私は自由なテンプレートを使って始めました。そして、すべてのCSS子孫は余分なスペースを使いこなしてしまいました!!私はちょうどスペースb/w#top-barと.animated-headerを削除しました!ありがとうございました! –

1

そのよりよいがcssですべてのスタイルを適用します。 #top-bar .animated-header#top-bar.animated-headerに変更すると、ここに余分なスペースがあり、スタイルが適用されません。しかし、あなたは本当にあなたがこれを行うことができますjQuery使用してスタイルを適用したい場合:

$(document).ready(function(){ 
    $(window).scroll(function() { 
     if ($(window).scrollTop() > 50) { 
      $("#top-bar").addClass('animated-header').css({'background-color': '#ef7c7c', 'height': '10%'}); 
     } else { 
      $("#top-bar").removeClass('animated-header').css({'background-color': '', 'height': ''}); 
     } 
    }); 
}); 

$(document).ready(function(){ 
 
    $(window).scroll(function() { 
 
     if ($(window).scrollTop() > 50) { 
 
      $("#top-bar").addClass('animated-header'); 
 
     } else { 
 
      $("#top-bar").removeClass('animated-header'); 
 
     } 
 
    }); 
 
});
body { 
 
    height: 1000px; 
 
} 
 
#top-bar { 
 
    background: transparent; 
 
    color: #fff; 
 
    -webkit-transition: all 0.2s ease-out 0s; 
 
    transition: all 0.2s ease-out 0s; 
 
    padding: 30px 0; 
 
    height: 15%; 
 
} 
 
#top-bar.animated-header {/*Background Color of nav bar when scrolled*/ 
 
    background-color: #ef7c7c; 
 
    padding: 10px 0; 
 
    height: 10%; 
 
    -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1); 
 
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<header id="top-bar" class="navbar-fixed-top animated-header"> 
 
      <div class="container">

+0

ありがとう!私はスペースを削除し、それは働いた! –

+0

@ReikoKawaharaご参考までに) –

1

チェックスニペット、あなたはCSSを追加したとき、それは代わりに #top-bar.animated-headerあるべきで少し問題を#top-bar .animated-header

$(document).ready(function() { 
 
$(window).scroll(function() { 
 

 
if ($(window).scrollTop() > 50) { 
 
    $("#top-bar").addClass('animated-header'); 
 
    
 
} 
 
else { 
 
     $("#top-bar").removeClass('animated-header'); 
 
    
 
} 
 
}); 
 

 

 
});
#top-bar { 
 
    position:fixed; 
 
top:0;left:0; 
 
    background: transparent; 
 
    color: #fff; 
 
    -webkit-transition: all 0.2s ease-in 0s; 
 
    transition: all 0.2s ease-in 0s; 
 
    padding: 30px 0; 
 
    height: 15%; 
 
} 
 
#top-bar.animated-header { 
 
    /*Background Color of nav bar when scrolled*/ 
 

 
    background-color: #ef7c7c; 
 
    padding: 10px 0; 
 
    height: 10%; 
 
    -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1); 
 
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header id="top-bar" class="navbar-fixed-top animated-header"> 
 
    <div class="container"> 
 
    logo 
 
    </div></header> 
 

 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

+0

ありがとうございました、それは問題でした!今は完璧に動作しています! –

+0

問題があれば、@ ReikoKawaharaを助けてうれしいので、正しい答えとしてこの答えを受け入れる:) –