粘性導航-動畫並向上推

Question

我正在嘗試創建一個導航標題，該導航標題粘貼在窗口/瀏覽器的頂部，直到下一個導航標題（一個div框）將其向上推到視圖之外。 導航標題具有一個動畫，一旦用戶向下滾動到.fillwindow的底部，該動畫就會淡入。

我創建了一個JS小提琴，以嘗試更詳細地說明我要實現的目標。 在那里，您將能夠看到我所遇到的小故障。 http://jsfiddle.net/kntnqqa6/5/

• 有誰能解釋為什么CSS中的'top'屬性似乎不影響類.header ？
• 同樣在jquery部分的.animate事件中： .animate({'opacity':'1', 'top':'40'} ， 'top':'40'無法正常工作嗎？我假設是由於上述問題

理想情況下，我的目標是使其無縫。 如您所見，它們之間的距離太遠了。

任何輸入，不勝感激。

Answer 1

頂部CSS屬性指定定位元素的位置的一部分。 它對未定位的元素沒有影響 。

對於絕對定位的元素（那些具有位置：絕對或位置：固定的元素），它指定元素的頂部邊緣到其包含塊的頂部邊緣之間的距離。

對於相對定位的元素（位置：相對的元素），它指定元素在其正常位置以下移動的量。

來源： https : //developer.mozilla.org/en-US/docs/Web/CSS/top

我重點介紹了影響代碼的部分。 top屬性僅適用於定位（固定，絕對，相對）元素。 您沒有分配其中之一，因此將div放置為靜態。

您的問題應該通過添加position: relative來解決position: relative對於.header