クラスをAngularを使用して追加したときCSSクラスのスタイルが適用されない

divの下にローカライズされたヘッダーを作成しようとしています。あなたがスクロールし、ヘッダーがページの上部に達すると、そこに「滞在する」必要があります。私はAngularを使用していますので、この解決策を見つけました：Bind class toggle to window scroll eventここに私はクラスfix-headerを追加するために使っています。インスペクタでは、クラスが追加されたことがわかりますが、追加されるとスタイルは適用されません。ここでは、固定ヘッダを作るための私のCSSは次のとおりです。クラスをAngularを使用して追加したときCSSクラスのスタイルが適用されない

.wrapper { 
    background-color: pink; 
    height: 100px; 
    z-index: 1; 
} 

.wrapper .fix-header{ 
    position: fixed; 
    top: 10px; 
}

「修正-検索」クラスがここに追加されます。

<body ng-app="myApp"> 
    <div ng-controller="MyController"> 
    <div class="banner"> 
     <div class="dummy-container"></div> 
     <div class="wrapper" change-class-on-scroll offset="200" scroll- 
      class="fix-header"> 
     </div> 
    </div> 
    </div> 
</body>

wrapperのdivにクラスfix-headerを追加change-class-on-scroll offset="200" scroll-class="fix-header"ライン。ここにいくつかの作業コードがあります：https://codepen.io/Martin36/pen/jmbEgJ

私の質問は、なぜクラスプロパティが追加されるときに適用されないのですか？

出典

2017-04-17 martin36

幅を指定してください – Ronnie

@Ronnieありがとうございました。今度は下にスクロールするとヘッダーが表示されます。 – martin36

クラスを追加するときにスタイルが適用されないのはなぜですか。

間違ったクラスを参照しているので、あなたのCSSのターゲットは次のようになります。

.wrapper.fix-header{ 
    position: fixed; 
    top: 10px; 
}

注ラッパークラスの間にはスペースや固定ヘッダクラス

出典

2017-04-17 21:17:59 cnorthfield

はい、それでした。どうもありがとうございました。 – martin36

私は@で与えられたコメントを組み込みますRonnieと@cnorthfieldからの回答と更新されたペン：https://codepen.io/Martin36/pen/jmbEgJ、興味のある人のために。「ダミー」divをスクロールすると、ヘッダーが画面の上部にスティックされるようになりました。以下の変更が行われました。

/* Since the classes are on the same element there should not be a blank between them */ 
.wrapper.fix-header{ 
    background-color: pink; 
    height: 100px; 
    /* Without the "width" the header disappears */ 
    width: 100%; 
    z-index: 1; 
    position: fixed; 
    top: 0; 
    left: 0; 
}

出典

2017-04-17 21:33:32 martin36

cnorthfieldの答えについて詳しく説明するには：単一のスペースの追加/削除が大幅セレクタの意味をどのように変化するか

/*Apply style to all elements of both the wrapper class and the fix-header class*/ 
.wrapper .fix-header 
{ 

} 

/*Apply style to all elements which have both the wrapper and fix-header classes*/ 
.wrapper.fix-header 
{ 

}

注意してください。

出典

2017-04-17 21:42:25 nmg49

クラスをAngularを使用して追加したときCSSクラスのスタイルが適用されない

答えて

関連する問題