页面向上滚动弹出模块这个特效比较适合资源类网站,用户来到你的网站后一般动作就算向下翻页找,找着找着发现没找到,一般会回到顶部去找导航栏之类的,这个时候就会产生一个向上滚动的动作。
这个时候就适合弹出一个搜索框提醒用户可以直接通过搜索找到想要的东西哦。
这就算是一个用户体验优化的东西吧,本文来介绍来这个特效的搞法。
照惯例还是用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主题的暗黑模式是什么?怎么设置和使用暗黑模式?01-19
- 2zblog判断插件是否安装或者启用的代码介绍01-16
- 3translate3d和z-index冲突导致z-inde值无效的解决办法01-10
- 4zblogphp提示“ Call to undefined function openssl_pkey_get_public()”的原因和解决办法12-25
- 5zblogphp1.6版本报错“非法访问”的原因和解决办法12-23
- 6wordpress导航栏自定义添加class和rel="nofollow"的步骤12-13
- 7swiper做导航栏时自动跳转至对应分类的代码12-07
- 8zblogphp自带js框架评论接口大全12-04
- 9wordpress提示"Error establishing a database connection"的解决办法11-10
- 标签聚合
- ×1卡刷×20zblogphp模板×1zblog立即购买×1团购×3单栏模板×1标题×1移动利润×2百度×1飞young9分卡×1ME526救砖×1互联网×1团购活动×1存量线下×5淘宝客模板×1个人博客×3zblog评论×13dedecms×1神州行家园卡×2欢乐谷门票×1三星I917
最新评论
-
吸料机
已经解决 -
xinling2020.com
我今天在路上还在想我的个人博客要是写到1W文章数量会不会崩,看到这几十万我就放心了。这辈子也不可能有这样的数据~!哈哈 -
访客
不知道百度**收录怎么样 -
天兴工作室
这玩意你看下php手册啊https://www.php.net/manual/zh/function.date.php,m就是星期几 -
风羽
PHP版没有直接的星期几哦,找了好久没有,只能用JS转换~