页面向上滚动弹出模块这个特效比较适合资源类网站,用户来到你的网站后一般动作就算向下翻页找,找着找着发现没找到,一般会回到顶部去找导航栏之类的,这个时候就会产生一个向上滚动的动作。
这个时候就适合弹出一个搜索框提醒用户可以直接通过搜索找到想要的东西哦。
这就算是一个用户体验优化的东西吧,本文来介绍来这个特效的搞法。
照惯例还是用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模块里面具体放啥就自己决定了。
相关推荐
欢迎 你 发表评论: 取消回复
- 最新文章
- 热文排行
- 最多评论
- 1天兴工作室官网购物活动:全场8折优惠券 不限次数不限金额04-17
- 2天兴工作室zblog纯博客主题 vue3+小程序双版本03-19
- 3vue3项目引入vant报错的错误原因和解决办法03-12
- 4天兴工作室zblog百科主题 可搭配会员插件实现知识付费盈利03-06
- 5zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 6天兴工作室2023双11活动:五折优惠券大放送11-05
- 7腾讯云2023双11活动:2H2G3M轻量服务器88一年限新用户11-05
- 8新老同享 阿里云2023双11活动:2核2G3M带宽云服务器99元/年!10-31
- 9天兴工作室zblog免登录付费阅读插件 支持支付宝微信支付虎皮椒支付10-09
- 标签聚合
- ×1zblogphp伪静态×1免费zblog模板×1jq配色器×1zblogphp企业主题×1gravatar头像×1邮件发送×1阿里巴巴普惠体×1定制×1六一儿童节×1阿里云双12×1单身狗×1大红企业主题×1a298t×1云服务器×1上一篇×1新增联动类别调用×1七牛×1图片滚动×1blockquote×1js特效
最新评论
-
天兴工作室
可以看下更新记录,上个月29日才更新的 -
访客
现在这个主题还更新吗 -
天兴工作室
打开编辑文字,选中代码语言,然后不管是回车断行还是复制粘贴,都不会被分为一行一框啊,所以没理解你是咋办到的 -
访客
zblog文章中发多行代码,被分成一行一个框,一行一个框,如何调整成和你的一样的一段代码在一个框中 -
天兴工作室
这个功能本来就有