我正试图为http://www.appledevice.expert
创建一个粘性导航,但遇到了相当困难。
我试着用这些属性粘贴标题:-
position: fixed ;
width: 100% ;
它不起作用,把我所有的内容都扔到了标题下。然后,我尝试将导航栏包装在一个新的div
类中以锚定它,但这也不起作用。
编辑并赋予您的标题一些属性(注释的新行):
#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;
}
为了解决主体在标题下移动的问题,我在主体内部应用了这个div代码;
div style="height:110px"
然后,主体向下移动div元素的高度,并为顶部导航栏留出空间。