html - body 重叠固定，水平导航栏在顶部 - CSS/HTML

Question

我必须为一项任务制作一个网站，但遇到了一些麻烦。我在顶部创建了一个导航栏，它处于固定位置。但是，当我滚动时，一切都会显示出来。我想要的基本上是让网页从导航栏下方开始，因此它位于顶部，当我单击“关于我”时，它在导航栏下方没有标题，如第二张图片所示。

http://i.imgur.com/oTkXlWx.png

有人知道怎么做吗？谢谢。

#top-bar
    {   
        border-top:#fff dashed 1px;
        width:100%;
        height:32px;
        background:black;
        opacity:0.8;
        text-align:center;
        position:fixed;
        top:0;
        padding-bottom:12px;

    }

#top-nav li
{
    display: inline-block;
    line-height: 49px;
    padding: 0px 14px;


}

#top-nav li a
{
    display:block;
    color: #ddd;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

#top-nav li:hover, #top-nav li:hover a
{
    background-color:#333;
    color:#fff;
}

和 html:

    <nav id="top-bar">
        <ul id="top-nav">
            <li>
                <a href="#about-text">About Me</a>
            </li>

            <li>
                <a href="#programming-text">Programming</a>
            </li>

            <li>
                <a href="#home-text">Hometown</a>
            </li>

            <li>
                <a href="#swinburne-text">Swinburne</a>
            </li>

            <li>
                <a href="#achievement-text">Acheivements</a>
            </li>
        </ul>
    </nav>

基本上，我不希望网页“滚动”导航栏。另外，我的类(class)还没有完成 javascript，所以如果有一个不使用 javascript 的解决方案那就太好了。

谢谢大家。

附言这是关于 div 的代码:

<div id="about-text" class="box">
    <h3>About Me</h3> 
    <p>My name is   , I'm 18 years old, and a Computer
    Science student at Swinburne University of Technology, Hawthorn.
    I've always been interested in computers, there is something
    beautiful about technology working to do so many things the human
    brain cannot possibly do.</p>
</div> 

和CSS:

#about-text, #programming-text, #home-text, #achievement-text
{

    border-style : solid;
    border-width:0.2em;
    opacity:0.5;
    width : 70%;    
    transition: opacity 0.2s;
    -webkit-transition: opacity 0.2s;

}

Answer 1

我相信您只需要为 .boxes 提供足够的 margin-top 即可清除固定的导航栏。

更新:

发现问题的根本原因是使用页内链接，点击时总是向右滚动到视口(viewport)顶部(在固定导航下)。

最好的解决方案最终是在每个 div.box 之前添加空的 a 元素以用作链接的目标，并为它们提供足够大的尺寸.box 将位于导航栏下方:

<a href="#about-text" class="button"></a>
<div class="box"> ... </div>

.button {
    display: block;
    padding: 25px;
}