新闻中心

zblog跟随导航的设置方法

作者 / 无忧主机 时间 2015-11-26 15:28:39

无忧主机小编今天要给各位站长朋友介绍的是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

1
1
1
1
1
1
1