Question

我需要帮助我的代码。我正在尝试制作一个带有粘性标题的网站。但是，页面上的按钮会覆盖身体部位。这是我网站的代码页：Click here

这是我的代码：

                let id = snapshot.value.valueForKey("senderId") as! String
                let text = snapshot.value.valueForKey("text") as! String
                let locationId = snapshot.value.valueForKey("location") as! String

Answer 1

您需要对页面内容应用偏移量，该偏移量等于（或大于）固定标题元素的高度;例如 -

<header style="position:fixed; top: 0; height: 200px;" class="container-fluid header a">
    <div class="row">
        <a href="#top"><img src="http://hguochen.com/static/img/tech/css3.png"style="max-width:80px"class="img-responsive"></a>
        <div class="col-xs-6">
            <a href="#scr"><button class="btn btn-primary">ABOUT</button></a>
            <a href="#scr"><button class="btn btn-primary">PORTFOLIO</button></a>
            <a href="#scr"><button class="btn btn-primary">CONTACT</button></a>
        </div>
    </div>
</header>
<div style="margin-top: 200px;">
{YOUR PAGE CONTENTS HERE.}
</div>

请参阅：https://jsfiddle.net/u7ck368y/

Answer 2

我已从codepen创建了fork。

code

http://codepen.io/anon/pen/mAgEYY

你只需要从标题中删除13％的高度。并且还需要在列中放置徽标。

Answer 3

从13%课程中删除.header。添加标题类top: 0;并将padding top: 115px;添加到正文。

Answer 4

将padding-top:8%;添加到标题和{{1}}到正文，或者您可以将内容包装在div中并添加填充。

这样你可以继续使用％作为标题元素的高度。

标题上的徽标大小

4 个答案: