使用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>

線change-class-on-scroll offset="200" scroll-class="fix-header"添加類fix-header到wrapper股利。這裏有一些工作代碼：https://codepen.io/Martin36/pen/jmbEgJ

所以我的問題是，爲什麼不添加class類時應用類屬性？

來源

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類的樣式

回答

相關問題