无忧主机小编今天要给各位站长朋友介绍的是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如何使管理员默认头像不一样

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

上一篇: Ecshop教程：在首页的发货查询里显示省市区地址信息
下一篇: zblog程序asp版本转换成php版本的方法