页面向上滚动弹出模块这个特效比较适合资源类网站,用户来到你的网站后一般动作就算向下翻页找,找着找着发现没找到,一般会回到顶部去找导航栏之类的,这个时候就会产生一个向上滚动的动作。
这个时候就适合弹出一个搜索框提醒用户可以直接通过搜索找到想要的东西哦。
这就算是一个用户体验优化的东西吧,本文来介绍来这个特效的搞法。
照惯例还是用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
- 标签聚合
- ×1免费zblog模板×1zblog大气企业模板×1网站版权×1红色企业模板×1自适应zblog主题×1百度搜索代码×2简洁模板×1标题修改×1zblog字节小程序×1域名新注册×1下拉记载×1GetVars×1舞步学院×2wordpress下一篇×1jsapi接口×8zblog教程×1zblogasp转换zblogphp×8cms模板×4优惠活动×1用户中心插件
最新评论
-
天兴工作室
03-21对的,下个版本会修复 -
访客
03-20此模版多张并排图片,不管点哪张图,都显示第一张,且没有轮播按钮,只能手动关闭。 系统:win7+火狐浏览器 -
天兴工作室
01-19没听懂 你是要批量创建分类?这是插件的事情主题不会考虑的 -
访客
01-18分类一个一个设置太麻烦了。能不能在主题设置里添加对分类的设置。 -
天兴工作室
01-16没太理解你的需求,麻烦联系我们的在线qq2076496616提供订单号详细说明下需求