标题/导航问题

Question

所以我有一个问题，我不知道从哪里开始解决它。

我有一个标题，在这个标题内我有我的导航标签/css。这是一个固定的标题，所以当我向下滚动页面时，文本会在它下面。我遇到的问题是，每当我尝试将文本放在页面上（标题下方）时，我发现我必须将文本向下移动大约 100 像素才能显示在页面上。

所以我的问题是如何设置标题，以便除非/直到我向下滚动页面，否则没有文本可以放在它后面？

提前感谢大家的帮助！

<div class="pageheader-cont">
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">My page</a></li>
<li><a href="#">Contributors</a></li>
<li><a href="#">Info</a></li>
<ul id="drop-nav">
<li class="mess"><a href="#">Sign out</a>
<ul>
<li><a href="#">Settings</a></li>
</ul>
</li>
<li class="mess"><a href="#">Write us!</a></li>
</ul>
</nav>
</div>
</div>

好的，这里是一些代码。看起来有点乱，但那是因为我试图退出并写信给我们！有不同的设置，但现在 Home-Info 被取代了。不确定如何正确解决此问题。

这是我做不到的代码

标签由于上面的标签。

<p class="itembelowheader"><a href="#">Items Page</a></p>
<p class="itembelowheader"><a href="#">Item one </a></p>
<p class="itembelowheader"><a href="#">Item two</a></p>

Answer 1

我建议将以下内容添加到您的标题下方的项目的 CSS 中

#itembelowheader {
margin-top: 100px; // or whatever you header height is.
}

或者让标题保持正常，只有在开始滚动后才将其从正常的放置例程中取出。

Answer 2

试试这个解决方案

HTML

<div id="header">
THIS IS NAVIGATOR
</div>

<div id="content">
TEXTS GOES HERE
</div>

CSS

#header {
height:50px;
width:100%;
background-color: darkblue;
top: 0;
position: fixed;
color: white;
}

#content {
height: 1000px;
margin-top: 65px;
color: black;    

}

小提琴http://jsfiddle.net/y3aucbhv/