Question

我正在尝试为http://www.appledevice.expert创建一个粘性导航，并且遇到了相当困难的时间。

我尝试使用以下属性来标记标题： -

position: fixed ;
width: 100% ;

它无法正常工作，并将所有内容都放在标题下。然后我尝试将导航栏包装在一个新的div类中以锚定它，这也不起作用。

Answer 1

编辑并为标题添加一些属性（注释掉新行）：

#header {
    line-height: 98px;
    background: #FFF url("images/header-top.png") repeat-x top center;
    border-bottom: 1px solid #d3d5d7;
    -webkit-box-shadow: 0 0 5px 0 #e2e3e4;
    -moz-box-shadow: 0 0 5px 0 #e2e3e4;
    box-shadow: 0 0 5px 0 #e2e3e4;
    position: fixed; /*This is different*/
    z-index: 99999;
    margin-bottom: 30px;
    width: 100%; /*This is new*/
}

然后在最上面的div中添加一个上边距，使其等于标题的高度：

.sections:first-of-type {
      margin-top: 110px;
}

Answer 2

为了解决身体在标题下移动的问题，我在体内应用了这个div代码;

div style =“height：110px”

然后身体向下移动div元素的高度，并为顶部导航栏留下空间。

粘滞导航栏不起作用

2 个答案: