实现导航条浮动的最简单方法

这两天跟博友十万大山谈论导航条的浮动问题,让我又长了知识了~~嗯,写个笔记。注:此方法只针对导航条处于网页最顶部的情况,但是对于我这个站这样的,就尴尬了……

以前说的解决方案是用js实现,感觉不够简单,也会影响网页打开速度。只需要修改其属性position: fixed;就可以将它“固定”在网页某个位置,不随网页上下拉动而消失,另外添加z-index: 99;属性,使该层处于最顶层。这样会产生一个问题:导航条会偏离,不在网页中心对称,网页缩放或因电脑分辨率不同,会显得错版很不美观。这时只需改动它的宽度使width: 100%;即可。

上述方法对于一般的最顶端导航条都有效……设置好导航条浮动之后,网页会整体上移一点点,只需给下面整个层添加padding-top属性,具体值自己可以调试确定。

青春悄然而逝,我,一路向前...

8 Comments On 实现导航条浮动的最简单方法

  1. avatar

    来学习一下,好实在的内容,支持了

  2. avatar

    简单明了的说词,赞一个!

  3. avatar

    怎么都不会 郁闷

  4. avatar

    我是来看这个的…

  5. avatar

    我的网站模板自动实现了顶部导航浮动,现在想增加一个左侧的导航,也希望可以浮动,主要目的是用来建立索引,首页太长了,有没有这个方法呢

    • avatar

      @cuptime 好久没折腾代码了 真心搞不来 但换成是我 可能左侧建立一个浮动的层,层里内容不同的行,每行对应一个标题的锚链接。建议去论坛问或者转至wp代码高手处。。。

| ^_^ 本站因你的评论更精彩!

发表评论