0

我必须为一项任务建立一个网站，我遇到了一些麻烦。我在顶部创建了一个导航栏，它位于固定位置。但是，当我滚动时，一切都会通过它显示出来。我想要的，本质上是让网页在导航栏下开始，所以它在顶部，当我点击“关于我”时，它在导航栏下没有标题，就像在第二张图片中一样。

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>

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

多谢你们。

PS 这是关于 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;

}
4

2 回答 2

1

我相信你只需要给.boxes 足够的 amargin-top来清除固定的导航栏。

更新：

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

最好的解决方案最终是a在每个元素之前添加空元素div.box以用作链接的目标，并为它们提供足够大的大小以使它们.box能够落入导航栏下方：

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

.button {
    display: block;
    padding: 25px;
}
于 2013-04-19T17:23:40.143 回答
0

您可以使用的一个技巧是放在标签nav内header并为标题提供背景颜色，白色或您使用的任何颜色。向下滚动将在导航栏下方，但由于与它重叠的背景颜色，它不会被看到。

于 2015-11-06T21:33:53.463 回答