香港独立IP空间
香港php空间
美国php空间
域名注册

无忧主机小编今天要给各位站长朋友介绍的是zblog跟随导航的设置方法,那么也许有站长朋友要提问了,什么是跟随导航呢?通俗的来说就是,当导航栏下拉到了一定的高度后就会固定在顶部的特殊效果,是不是很不错呢,接下来无忧主机小编就来讲解一下跟随导航的设置步骤,方法如下。

首先编辑一段js代码,代码如下:

<script type="text/javascript">
$(function(){
var nav=$(".nav"); 
var win=$(window); 
var sc=$(document);
win.scroll(function(){
if(sc.scrollTop()>=100){
nav.addClass("fixednav");
$(".navTmp").fadeIn();
}else{
nav.removeClass("fixednav");
$(".navTmp").fadeOut();
}
}) 
})
</script>

以上代码中的“nav”修改成自己页面导航的class,数字“100”是下拉的高度,单位为像素,可以根据自己的需求修改这个值。然后就是在使用的导航页面的css文件里增加一个属性:

.fixednav {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 1;
}

全部修改后之后刷新数据就可以在导航页面看到效果了。

无忧主机相关文章推荐阅读:
ZBLOG文章页标题优化
ZBLOG文章标题的位置怎么更改
Z-BLOG如何使管理员默认头像不一样

本文地址:http://www.51php.com/zblog/20944.html

喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

阅读本文的人还阅读:


搜索技术文档