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日,因布局原因在本站上去掉了这个效果。)

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

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

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

  1. ブランドコピーブランド専門店
    ぜひ一度のブランドコピーブランド品をお試しください。
    驚きと満足を保証できます。
    ご利用を心からお待ちしております。
    営業時間: ご注文はオンラインにて年中無休24時間受付けております。

  2. ★最高等級ウブロコピー時計大量入荷!
    ▽◆▽世界の一流ウブロコピー品N級の専門ショップ★
    注文特恵中-新作入荷!-価格比較.送料無料!
    ◆主要取扱商品 スーパーコピー時計!
    ◆全国送料一律無料
    ◆オークション、楽天オークション、売店、卸売りと小売りの第一選択のブランドの店。
    ■信用第一、良い品質、低価格は 私達の勝ち残りの切り札です。
    ◆ 当社の商品は絶対の自信が御座います。
    おすすめ人気ブランドコピー腕時計, 最高等級時計大量入荷!
    ◆N品質シリアル付きも有り 付属品完備!
    ☆★☆━━━━━━━━━━━━━━━━━━━☆★☆
    以上 宜しくお願い致します。
    (^0^)

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

发表评论