刚用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日,因布局原因在本站上去掉了这个效果。)
之后了解到一种实现导航条浮动的最简单方法,适用于导航条处于网页最顶部的网站。
话说我那导航栏折腾了许久,也没把它浮起来……
管理界面是有一条浮动的,访客就没了……o(︶︿︶)o
@十万大山 贵站也是WP的吖,看你的导航本就在最上面,试着在谷歌审查里面加了几行代码,可以实现导航条浮动,但是不同分辨率或缩小情况下会不好看。俺也是新手~哈~
@十万大山 在你的header属性里面加上
position: fixed;
z-index: 99;
padding-right: 100%;
看看效果?
@枫影 我对这代码不太懂,这应该不是完整的代码吧,前面应该有什么标签的吗?
另外,你在多说那边的登记的网址是http://hiyiji.com/????
这跟贵站的地址很相似,可惜字母反过来了
@十万大山 代码插到CSS的header层里面。
刚查看了我以前的多说设置里面,是我的hijiyi没错……不知道何故,上次碰到过一次不过后来恢复了。也许过会儿会恢复吧
@十万大山 放在你的style.css文件里面的#header{
height:50px;
background:#fff url(images/menu.gif) repeat-x;
}
中试试效果。我新手一时也只能想到这么三句代码粗略实现。
@枫影 是有效果的,不过类似的代码我之前用过
出现的一个问题是文章框,跟小工具被遮挡了
它们并没有留在原来的位置,导航栏浮起来后,它们就顺势顶上去补空了,结果就被遮挡了……
这主题的排版,似乎太过于聪明了,居然会自动补空的
@十万大山 在wrapper里面加个 padding-top: 50px;就行了
@枫影 果然是高人,解决了一个困扰我已久的问题
赞一个……(*^__^*)
@十万大山 (*^__^*)我也是菜鸟,刚好这个问题我以前研究了好几天才懂一点
@十万大山 另外你的导航栏这样子改的话,你的logo会偏左,不好看,你在header里面加个padding-left: 10%;会好看点。或者11%、12%的自己试着调整。
这种方法做出来的浮动,会因为电脑分辨率的不同,自适应效果不好,所以我把我网站的浮动效果去掉了……
比如网页缩小,导航栏会往左偏离,等有空我再研究下这个问题怎么解决……
@枫影 我想我已经解决自适应的问题了。就是不要
padding-right: 跟 padding-left:
直接指定 width: 100%;
这样网页放大缩小等都没什么问题,有很好的自适应效果
@十万大山 干的漂亮~
以前我也试过改这个,但因我的导航栏有点特殊,不能用这种方法实现,现在都忘记了。。
简单呐。
接着在
#wrapper{
margin: 0 auto;
width: 1036px;
}
里面加个 padding-top: 50px; 不就行了么
我用的主题可以选择从sidebar1到sidebar5,而且sidebar.php里几乎没有内容,在第三步中要怎么办?
@Capbone 看了你的主题,有点复杂,不是我这种小菜鸟能解决的
不过一般是做法是,需要哪一层浮动就给哪块设置float,你的如果是有5个sidebar可选的话,就找你用的那个sidebar里面需要浮动的那块
路过。看看…..
@xilouqingzhu HO~欢迎
用心学习了