粘性导航栏不起作用

Posted 2023-04-13

【中文标题】粘性导航栏不起作用

【英文标题】：Sticky navigation bar is not working

【发布时间】：2015-04-08 18:40:12

【问题描述】：

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

我尝试在标题中添加这些属性：-

position: fixed ;
width: 100% ;

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

【问题讨论】：

欢迎来到 SO。请向我们展示一些代码，以便我们为您提供帮助。此外，请查看 How do I ask a good question 文章并修改您的问题以符合这些准则。

你能分享你目前尝试过的代码（html/css）吗？

【参考方案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;

【讨论】：

将这些属性添加到#header，而不是按照建议将高度函数应用于 但没有解决问题。感谢您的尝试

这是标题 CSS: line-height: 98px;背景： url("images/header-top.png") repeat-x 滚动中心顶部 #FFF;边框底部：1px 实心#D3D5D7；盒子阴影：0px 0px 5px 0px #E2E3E4;位置：相对； //**尝试将其更改为固定 z-index: 99999;边距底部：30px；宽度：100%； //*尝试更改此设置我尝试为每个顶部添加一个高度，包括： .header .sections .container 这些都不起作用，但在某一时刻，我确实让导航坚持顶部边距空间，但是顶部的文本nav 与导航栏无关。 #对此非常头疼

@No.1Deisgns 看来你添加了很多额外的东西。当我访问您的网站时，我所要做的就是确切地上面我的答案中的内容并且它有效。我不确定您为什么要添加高度函数或向每个顶部添加高度。只需添加.sections:first-of-type margin-top:110px; 添加width:100% 并将position:fixed 更改为仅#header。

.... .sections:first-of-type 在哪里，因为我似乎找不到这个？提前感谢芽

.... 经过一些研究发现它是一个伪元素。以前从来没有放过这些。我在哪里添加 .sections:first-of-type。当我将它插入到最上面的 div 中时，它有一条线穿过它，还是内联？

【参考方案2】：

为了解决正文在标题下移动的问题，我在正文中应用了这个 div 代码；

div style="height:110px"

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