滚动时如何使导航栏保持在页面顶部?

ben_dchost

这是HTML代码

<div id="header" class="grid_12">
<h6>DCHOST - Brought to you by <a href="http://www.dt.co.uk" target="_blank">
DataConnectivity.co.uk
</a></h6>
            <ul>
                <li>Home</li>
                <li>Hosting</li>
                <li>Domain Names</li>
                <li>Lates News</li>
                <li>About us</li>
                <li>Contact Us</li>
            </ul>
        </div> <!-- ends header grid 12 -->

的CSS

#header {
color: #848484;
height: 70px;
width: 100%;
font-size: small;
font-style: oblique;
text-align: center;
background: #333333;}

#header h6 {
max-height: 3px;
font-size: 10px;
text-align:left;
}

#header li {
font-weight: 800;
color: #FFFFFF;
font-style: normal;
display: inline}

我希望我的导航栏保持固定在页面顶部。但是,每次我将位置更改为固定时,该条都会完全消失。我不知道为什么要这么做?在此先感谢您的帮助!

阿福兰

您需要将标头top: 0;放置在并将其设置z-index为高于所有其他元素的位置。

#header {
    position: fixed;
    top: 0;
    z-index: 999;
}

这还将增加浏览器之间的兼容性。

演示版

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

外部链接打开时,页面滚动到顶部并修复了导航栏

来自分类Dev

滚动时如何使导航栏保持在页面顶部?

来自分类Dev

固定的导航栏顶部滚动问题,页面内容覆盖

来自分类Dev

Bootstrap,在使用视口高度时向下滚动后如何使导航栏保持粘性?

来自分类Dev

如何使导航栏随页面滚动?

来自分类Dev

向下滚动时,导航栏变为透明并固定在顶部

来自分类Dev

引导程序。滚动链接菜单并修复页面顶部的导航栏

来自分类Dev

导航栏展开后,如何使它滚动并固定到页面顶部?

来自分类Dev

滚动时如何将导航栏固定在顶部?

来自分类Dev

如何正确使导航栏保持固定在屏幕顶部?

来自分类Dev

滚动时将模式标题保持在顶部

来自分类Dev

滚动时如何使导航栏保持固定

来自分类Dev

如何正确使导航栏保持固定在屏幕顶部?

来自分类Dev

如何在滚动时显示侧边栏,并在页面顶部将其隐藏?

来自分类Dev

导航栏在页面顶部时更改大小

来自分类Dev

滚动顶部导航栏

来自分类Dev

用户滚动页面时尝试在顶部固定导航栏时面临的问题

来自分类Dev

固定的导航栏顶部滚动问题,页面内容覆盖

来自分类Dev

向下滚动页面时,元素保持在顶部,但始终位于标题下方

来自分类Dev

滚动时表格标题保持在顶部

来自分类Dev

滚动时如何保持顶部菜单固定

来自分类Dev

向下滚动页面时,导航栏将移至顶部

来自分类Dev

向下滚动时,导航栏变为透明并固定在顶部

来自分类Dev

滚动时更改导航栏固定的顶部颜色

来自分类Dev

是什么让我的导航栏在滚动时粘在顶部?

来自分类Dev

向下滚动时如何隐藏导航栏?

来自分类Dev

滚动过去标题后无法让我的导航栏保持在顶部?

来自分类Dev

向下滚动时如何使标题和导航栏都固定在顶部

来自分类Dev

Bootstrap 粘性顶部导航栏在滚动时消失

Related 相关文章

  1. 1

    外部链接打开时,页面滚动到顶部并修复了导航栏

  2. 2

    滚动时如何使导航栏保持在页面顶部?

  3. 3

    固定的导航栏顶部滚动问题,页面内容覆盖

  4. 4

    Bootstrap,在使用视口高度时向下滚动后如何使导航栏保持粘性?

  5. 5

    如何使导航栏随页面滚动?

  6. 6

    向下滚动时,导航栏变为透明并固定在顶部

  7. 7

    引导程序。滚动链接菜单并修复页面顶部的导航栏

  8. 8

    导航栏展开后,如何使它滚动并固定到页面顶部?

  9. 9

    滚动时如何将导航栏固定在顶部?

  10. 10

    如何正确使导航栏保持固定在屏幕顶部?

  11. 11

    滚动时将模式标题保持在顶部

  12. 12

    滚动时如何使导航栏保持固定

  13. 13

    如何正确使导航栏保持固定在屏幕顶部?

  14. 14

    如何在滚动时显示侧边栏,并在页面顶部将其隐藏?

  15. 15

    导航栏在页面顶部时更改大小

  16. 16

    滚动顶部导航栏

  17. 17

    用户滚动页面时尝试在顶部固定导航栏时面临的问题

  18. 18

    固定的导航栏顶部滚动问题,页面内容覆盖

  19. 19

    向下滚动页面时,元素保持在顶部,但始终位于标题下方

  20. 20

    滚动时表格标题保持在顶部

  21. 21

    滚动时如何保持顶部菜单固定

  22. 22

    向下滚动页面时,导航栏将移至顶部

  23. 23

    向下滚动时,导航栏变为透明并固定在顶部

  24. 24

    滚动时更改导航栏固定的顶部颜色

  25. 25

    是什么让我的导航栏在滚动时粘在顶部?

  26. 26

    向下滚动时如何隐藏导航栏?

  27. 27

    滚动过去标题后无法让我的导航栏保持在顶部?

  28. 28

    向下滚动时如何使标题和导航栏都固定在顶部

  29. 29

    Bootstrap 粘性顶部导航栏在滚动时消失

热门标签

归档