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>

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

谢谢你们。

P.S。以下是about的代码：

<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

我认为您只需要.box足够margin-top来清除固定的导航栏。

<强>更新

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

最佳解决方案最终是在每个a之前添加空的div.box元素以用作链接的目标，并为那些.box落入的大小足够大放置在导航栏下方：

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

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

Answer 2

您可以使用的一个技巧是将var requestParams = { url: "https://tibqwxuqoh.execute-api.us-east-1.amazonaws.com/dev/getitems", method: "POST, contentType: "application/json", dataType: "json", data: JSON.stringify({ "device": "test", "datetime": "1446757400919" }); }; var request = $.ajax(requestParams);放在nav标记内，并为标题，白色或您使用的任何颜色提供背景颜色。向下滚动将低于导航栏但由于背景颜色与其重叠而无法看到。

身体重叠固定，水平导航栏顶部 - CSS / HTML

2 个答案: