页面向上滚动弹出模块这个特效比较适合资源类网站,用户来到你的网站后一般动作就算向下翻页找,找着找着发现没找到,一般会回到顶部去找导航栏之类的,这个时候就会产生一个向上滚动的动作。
这个时候就适合弹出一个搜索框提醒用户可以直接通过搜索找到想要的东西哦。
这就算是一个用户体验优化的东西吧,本文来介绍来这个特效的搞法。
照惯例还是用JQ(不会原生js,李姐万岁),所以请先引入JQ库。
具体JQ代码如下:
var p=0,t=160; var sc=$(document); $(window).scroll(function(e){ p = $(this).scrollTop(); if(t>=p){ if(p < 10){ $(".search-top").slideUp(); }else{ $(".search-top").slideDown(); } } setTimeout(function(){t = p;},0); });
然后页面里面放一个class为"search-top"的div,给这个div写上固定在顶部的css并设置隐藏。具体css代码如下:
.search-top{ position:fixed; left:0; top:0; width:100%; padding:15px; background-color:rgba(255,255,255,0.9); box-shadow: 0 1px 4px rgba(0,0,0,.1); z-index:999; display:none; }
div模块里面具体放啥就自己决定了。
相关推荐
- 最新文章
- 热文排行
- 最多评论
- 12-141zblog提示:请勿冒名顶替;如果你是该用户,请先登录后再发表评论。
- 12-112天兴工作室第9款zblog企业主题 自带表单提交 邮件提醒等
- 12-063阿里云12月份2H4G3M云服务3年仅需799活动再次上线
- 12-034阿里云2019双12活动开始了 阿里云2019双12活动详细介绍
- 11-305css写三角形的原理和使用方法
- 11-286wordpress怎么调用置顶文章?wordpress调用置顶文章的方法
- 11-257唐世军博客模板wordpress版本上线 seo优化+简洁速度
- 11-228wordpress调用指定ID文章的代码
- 11-199天兴工作室微信小程序上线
- 标签聚合
- ×57zblog模板×33zblog×27zblogphp×20zblogphp模板×19天兴工作室×18阿里云×12dedecms×12zblog企业模板×11电子券×11ytcms×11zblog插件×10天兴互联×10zblog错误×9随意打×9模板×9zblog安装×9zblogphp1.5×8天兴通讯×8刷机×8企业模板
最新评论
-
访客 12-10
这个系统适合做小说吗 数据难道都存储在数据库吗? -
访客 12-08
小说可否添加专题功能 -
关尓佟博客 12-03
怎么让没有图片的文章不显示默认缩略图 -
访客 11-15
网址多少,我想看看 -
佐语先森 11-12
看来大佬是要开拓WordPress哇!
取消回复欢迎 你 发表评论: