WordPress实现导航条与侧边栏固定跟随页面浮动

刚用wordpress没几天,就想把网页的导航条与侧边栏设置成“固定跟随页面浮动”的效果,适用于广告投放。新手果然是新手哇,各种查代码、调试,花了两天时间才搞定这个问题。效果见本站hijiyi.com(已更换主题)。写个笔记吧,指不定哪天还用得上。若是有高手偶遇这篇文章,请勿喷。。。

—————分割线————切入正题—————

原代码与方法来自老妖互联网博客(已关闭),只做少量补充

第一步:引入js,放在header.php里面(</head>前)。

第二步:将执行代码放到footer.php里面(</body>前)。网上好像是说放到底部可以加快网页打开速度,没有测试过。

第三步:打开侧边栏sidebar.php。需要让哪一层固定随页面浮动,给这个层修改id="float"属性。(这里对于不懂代码的新手是最苦恼的…我至今也未解决如何使侧边栏自适应浮动,只能新建一两个层进行浮动)

老妖的博客上只说到这个方法,实现侧边栏的指定层固定随网页浮动,而导航栏的实现方法是一样的。只要在footer.php再复制一遍执行代码,将导航栏这层添加id属性即可。

如此操作,你会发现,导航栏会固定随着网页浮动,但是上面设置好的侧边栏浮动层却失效了…问题出在你设置了两个id="float"属性,网页中默认执行第一个,于是第二个失效了…怎么解决呢?简单!到footer.php里面找到那两段相同的执行代码,改动其中一段,尾部代码$("#float").smartFloat();里面的#float改成别的,比如#floatt,然后相应修改需要浮动层的id令其中一个id="floatt"就行了。
(PS后语:按此方法得到的侧边栏浮动层需要合理设置css样式使得浮动过渡平滑自然,但网页放大后这两个浮动层会偏离,经测试猜测为js原因。2013年4月5日,因布局原因在本站上去掉了这个效果。)

之后了解到一种实现导航条浮动的最简单方法,适用于导航条处于网页最顶部的网站。

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

25 Comments On WordPress实现导航条与侧边栏固定跟随页面浮动

  1. avatar

    话说我那导航栏折腾了许久,也没把它浮起来……
    管理界面是有一条浮动的,访客就没了……o(︶︿︶)o

    • avatar

      @十万大山 贵站也是WP的吖,看你的导航本就在最上面,试着在谷歌审查里面加了几行代码,可以实现导航条浮动,但是不同分辨率或缩小情况下会不好看。俺也是新手~哈~

    • avatar

      @十万大山 在你的header属性里面加上
      position: fixed;
      z-index: 99;
      padding-right: 100%;
      看看效果?

      • avatar

        @枫影 我对这代码不太懂,这应该不是完整的代码吧,前面应该有什么标签的吗?

        另外,你在多说那边的登记的网址是http://hiyiji.com/????
        这跟贵站的地址很相似,可惜字母反过来了

        • avatar

          @十万大山 代码插到CSS的header层里面。
          刚查看了我以前的多说设置里面,是我的hijiyi没错……不知道何故,上次碰到过一次不过后来恢复了。也许过会儿会恢复吧

        • avatar

          @十万大山 放在你的style.css文件里面的#header{
          height:50px;
          background:#fff url(images/menu.gif) repeat-x;
          }
          中试试效果。我新手一时也只能想到这么三句代码粗略实现。

          • avatar

            @枫影 是有效果的,不过类似的代码我之前用过
            出现的一个问题是文章框,跟小工具被遮挡了
            它们并没有留在原来的位置,导航栏浮起来后,它们就顺势顶上去补空了,结果就被遮挡了……
            这主题的排版,似乎太过于聪明了,居然会自动补空的

    • avatar

      @十万大山 在wrapper里面加个 padding-top: 50px;就行了

      • avatar

        @枫影 果然是高人,解决了一个困扰我已久的问题
        赞一个……(*^__^*)

        • avatar

          @十万大山 (*^__^*)我也是菜鸟,刚好这个问题我以前研究了好几天才懂一点

        • avatar

          @十万大山 另外你的导航栏这样子改的话,你的logo会偏左,不好看,你在header里面加个padding-left: 10%;会好看点。或者11%、12%的自己试着调整。
          这种方法做出来的浮动,会因为电脑分辨率的不同,自适应效果不好,所以我把我网站的浮动效果去掉了……
          比如网页缩小,导航栏会往左偏离,等有空我再研究下这个问题怎么解决……

          • avatar

            @枫影 我想我已经解决自适应的问题了。就是不要
            padding-right: 跟 padding-left:
            直接指定 width: 100%;
            这样网页放大缩小等都没什么问题,有很好的自适应效果

            • avatar

              @十万大山 干的漂亮~
              以前我也试过改这个,但因我的导航栏有点特殊,不能用这种方法实现,现在都忘记了。。

  2. avatar

    十万大山 :

    是有效果的,不过类似的代码我之前用过
    出现的一个问题是文章框,跟小工具被遮挡了
    它们并没有留在原来的位置,导航栏浮起来后,它们就顺势顶上去补空了,结果就被遮挡了……
    这主题的排版,似乎太过于聪明了,居然会自动补空的

    简单呐。
    接着在
    #wrapper{
    margin: 0 auto;
    width: 1036px;

    }
    里面加个 padding-top: 50px; 不就行了么

  3. avatar

    我用的主题可以选择从sidebar1到sidebar5,而且sidebar.php里几乎没有内容,在第三步中要怎么办?

    • avatar

      @Capbone 看了你的主题,有点复杂,不是我这种小菜鸟能解决的 :evil: 不过一般是做法是,需要哪一层浮动就给哪块设置float,你的如果是有5个sidebar可选的话,就找你用的那个sidebar里面需要浮动的那块 :!:

  4. avatar

    路过。看看…..

  5. avatar

    用心学习了

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

发表评论