微西风博客

当前位置:网站首页 / Zblog教程 / 正文

zblogphp版导航栏实现固定跟随的特效

  这个功能可有可无,不过是给网站加特效,我相信还是有人愿意Duang一下的。如果你看不懂标题,我大概给你讲解一下是什么意思,意思就是当你将页面下拉的一定程度后导航栏会固定显示在页面的上方。

下面给出代码,请按照所述方法操作,必定会成功。

将一下Js代码放置到header.php的尾部,第三行的.nav,“nav“改成你自己页面导航栏的class;第七行的”100“为下拉到100个像素的时候触发特效,可以自行修改至合适的高度。

<script type="text/javascript">
$(function(){
var nav=$(".nav"); //得到导航对象
var win=$(window); //得到窗口对象
var sc=$(document);//得到document文档对象。
win.scroll(function(){
  if(sc.scrollTop()>=100){
    nav.addClass("fixednav");
   $(".navTmp").fadeIn();
  }else{
   nav.removeClass("fixednav");
   $(".navTmp").fadeOut();
  }
}) 
})
</script>

然后在css文件里面添加一下代码

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

推荐阅读

文章标签: Zblog教程

版权声明: 本文除特别说明外均由原创

本文链接: http://www.weixifeng.com/post/140.html,尊重共享,欢迎转载,请自觉添加本文链接,谢谢!

分享本文:

Hello!看完文章有何感想呢?
  • 无聊

    0

  • 流汗

    0

  • 嘿嘿

    0

  • 支持

    0

  • 疑问

    0

呃 本文暂时没人评论 来添加一个吧

发表评论*(使用右侧的多说进行评论,外链是无Nofollow的哦!)

必填

选填

选填

◎请勿使用“IE模式”或者“IE浏览器”进行二次回复。上一篇  返回首页  下一篇

Top