滚动固定标题会向下显示，然后显示为

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; 
  

  }