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

    我想在网站首页左边加浮动的锚点定位链接栏,有没有办法实现呢

    • avatar

      @cuptime 懂了你意思 我不善于此技术 向别人取取经去吧~

  2. avatar

    发现老妖博客的网站关闭了啊,代码也就消失了

    • avatar

      @cuptime 网上的代码抄来抄去的 很多的 善用搜索“//绑定 $(“#float”).smartFloat(); ”试试吧

  3. avatar

    那如果是WordPress的文章,一个图加很多文字,想刚开始固定在某个图片,然后底下滚动文章顶部图不变,这样效果也能吗?新手测试了下,没搞成,还望指教,感谢

    • avatar

      @kangtime 抱歉看了好几遍你说的 不会…惭愧 请转至技术大牛或者论坛提问

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

发表评论