博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
懒加载实现的分页&&网站footer自适应
阅读量:6968 次
发布时间:2019-06-27

本文共 1692 字,大约阅读时间需要 5 分钟。

最近在做手机端,发现下拉刷新和上拉加载的jq控件很少而且自我感觉不好用,比如iscroll之类……

然后自己写了个懒加载的,也很简单,最基础的代码【不喜勿喷,但蛮实用的】

wap手机端懒加载分页:

用之前先引用下jquery.js

var current = 1;      $(function() {          $('body').bind('touchmove', function(e) {                  if($(this).scrollTop() > ($(window).height() * current - 150)) {//这里的150表示距离底部150像素触发,可自行调节                  current++;                  console.log("第" + current + "页");                  //这里放你的分页代码              }          });     });
if($(this).scrollTop()==0){//这是wap刷新代码,有需要请结合使用}

web电脑端懒加载分页:

用之前先引用下jquery.js

var current = 1;         $(function() {             window.onscroll = function() {                 if($(document).scrollTop() >= ($(document).height() - $(window).height() - 150)) {//150与wap手机端一样                     current++;                    //这里放你的分页代码                 }             }         });
if($(document).scrollTop()==0){//这是web刷新代码,有需要请结合使用}

web电脑端footer底部固定:

.footer.position {     position: absolute;     bottom: 0; }
$(function() {              auto();              window.onresize = function() {                  auto();              }          });            function auto() {              if($(window).height() > 917) {//917可自行调整,根据页面的内容高度                 $(".footer").addClass("position");             } else {//.position见css                 $(".footer").removeClass("position");             }         }

另一种方法【推荐

function auto() {      $("body").scrollTop(1); //控制滚动条下移1px        if($("body").scrollTop() > 0) {          $(".footer").removeClass("position");          alert("有滚动条");      } else {          $(".footer").addClass("position");          alert("没有滚动条");      }     $("body").scrollTop(0); //滚动条返回顶部   }

附上两张前后对比图,footer固定底部

1078060-20161209162622429-2132599427.png
1078060-20161209162641147-764753516.png

转载地址:http://vissl.baihongyu.com/

你可能感兴趣的文章
shell 命令学习
查看>>
DataURL与File,Blob,canvas对象之间的互相转换的Javascript
查看>>
布置阿里云
查看>>
【草稿】.net 中已经引用了dll,但是编译报错找不到类型或者命名空间
查看>>
Sublime Text 3注册码
查看>>
网站的宣传推广极为重要
查看>>
给Metro风格RSS阅读器加个搜索
查看>>
DNS显性+隐性URL转发原理
查看>>
Java 内存溢出(java.lang.OutOfMemoryError)的常见情况和处理方式总结
查看>>
日常数据文件自动入hive数据库
查看>>
AMD CEO罗瑞德称将调整战略 应对市场变化
查看>>
python符号计算
查看>>
我的友情链接
查看>>
我的友情链接
查看>>
L4 磁盘管理与实例演示
查看>>
Jfinal engin 集成shiro标签支持
查看>>
58同城的面试经历
查看>>
Linux下,Redis(四)Redis数据持久化
查看>>
Python编程快速上手让繁琐工作自动化 第十二章实践项目12.13.3 电子表格单元格翻转程序...
查看>>
关于nginx优先级问题
查看>>