滾動固定標題會向下顯示，然後顯示爲

Question

我在創建滾動固定標題時遇到了一些問題。我在這裏發現了一個很好的例子，現在我試圖使它適應我對它的修改，並且我正在嘗試修改它。

我把額外的div比例中的東西，現在每當我滾過黃色的酒吧，紅色的酒吧（我的頭）顯示方式比我想要的低。

我創建了一個小提琴來展示它在做什麼。

https://jsfiddle.net/zoue6gv7/

這個工作，直到我說我top保證金到我的DIV ID join_login。現在它離頂端很遠。

#join_login { 
position: absolute; 
right: 15%; 
top: 27px; 
font-size: 1em; 
color: #383838; 
} 

我該如何讓我的滾動點後，這個標題保持固定在頂部？

Answer 1

這是你想要的嗎？ https://jsfiddle.net/zoue6gv7/1/

我只是刪除了的margin-top -50px與

top: 0; 

Answer 2

這取代了它應該做的伎倆！您可以通過添加margin-top來消除#logo上方的空間：-15px

#logo { 
    position: absolute; 
    left: 15%; 
    top: 22px; 
    font-size: 2em; 
    margin-top: -15px; 
} 

Answer 3

只是在開玩笑！我想我誤解你想要做什麼，如果你想紅頭要堅持，即使你向下滾動頁面的頂部：

• 使用位置：固定;告訴標題停留在同一位置而不管滾動

• 使用top：0px;告訴頭，你想要的位置，它被固定在頁面的最頂端

  頭{

  position: fixed; 
  top: 0px; 
  width: 100%; 
  height: 75px; 
  background: red; 
  z-index: 100; 
  border-bottom: 1px solid #888888; 
  

  }