懒加载实现的分页网站footer自适应

news/2024/4/29 15:56:30/文章来源:https://blog.csdn.net/weixin_34040079/article/details/89179670

最近在做手机端,发现下拉刷新和上拉加载的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://www.luyixian.cn/news_show_701522.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

perl登录各种网站的原理与实现

2019独角兽企业重金招聘Python工程师标准>>> perl登录各种网站的原理与实现 tkorays(tkorayshotmail.com) 小孩子才践行大道理,大人只会讲。 写脚本抓取某个页面内容很简单,但是往往事情没那么简单。有些页面必须是要登录才能查看的&#xff…

5种方法提高你网站的登录体验

提升用户体验的最好的方法,或者更确切的说让产品更棒,都可以归结为让用户使用产品的整个体验更为简单。而对于如何提升登录过程的体验你有许多可以做的。 这里我们将探讨提升登录过程体验的五种方法,首先会提到两种不同的登录类型&#xff0c…

网站访问慢解决思路详细图解

老男孩老师讲授网站访问慢解决思路思想,感谢21期的李同学图解呈现,此图才能与大家见面!如果看着小,单击还原大图,可清晰查看!本图为亿图制作:亿图使用技巧:http://v.youku.com/v_sho…

《网站设计 开发 维护 推广 从入门到精通》—— 2.3 页面设计创意思维

本节书摘来异步社区《网站设计 开发 维护 推广 从入门到精通》一书中的第2章,第2.3节,作者:何新起 ,娄彦杰,更多章节内容可以访问云栖社区“异步社区”公众号查看。 2.3 页面设计创意思维 一个网站如果想确立自己的形象&#xff0…

awbeci网站之技术篇

之前写的一篇关于awbeci网站的使用和介绍,大家可以看看,地址在:http://www.cnblogs.com/zhangwei595806165/p/5245640.html 1、前台 BootStrap 选择bootstrap的原因是,最近两年bt实在是太火了,而且一些模板设计省了你再…

大型网站的 HTTPS 实践(1):HTTPS 协议和原理

转自:http://op.baidu.com/2015/04/https-s01a01/ 1 前言 百度已经于近日上线了全站 HTTPS 的安全搜索,默认会将 HTTP 请求跳转成 HTTPS。本文重点介绍 HTTPS 协议, 并简单介绍部署全站 HTTPS 的意义。 2 HTTPS 协议概述 HTTPS 可以认为是 HTTP TLS。HT…

12月国内网站流量统计5强:360安全中心后来居上

IDC评述网(idcps.com)12月31日报道:根据中国互联网协会-中国网站排名公布的最新数据显示,截至2015年12月28日,国内网站独立访问量五强排名依次是百度、360安全中心、腾讯网、搜狗、微博。具体情况如下图所示&#xff1…

26个复古风格网站设计欣赏

复古元素今年不断被提上来,那么今天下面分享的这26个复古元素的网页设计案例使用古典和现代的图形结合而成,还你一个不一样的复古网页设计案例,希望对你有所启发,enjoy!你可能感兴趣的复古网站资讯:《9个国…

开发人员学Linux(4):使用JMeter对网站和数据库进行压力测试

前言表面看来,JMeter与本系列课程似乎关系不大,但实际上在后面的很多场景中起着重要作用:如何获知修改了某些代码或者设置之后系统性能是提升了还是下降了呢?商业的压力测试工具LoadRunner确实很高大上,但是据说费用也…

14款优秀的代码展示网站

本文列出的这些网站可以分享和展示你的代码。它们都提供在线预览功能,所以别人可以看到你的代码如何运行。它们有时候也被称作“代码广场”或者“沙箱”。 它们不仅仅提供简单的代码展示功能,还提供很多代码协作和实际编程过程会用到的功能。例如&#x…

VS Code 调试Node.js express网站

VS Code是微软出品的一款跨平台的轻量级的Editor,我就不宣传了,想了解的自己去搜吧,总之我很喜欢。 下载地址:https://code.visualstudio.com/ 安装完成侯应该是自动加到环境变量里了吧,不记得了,如果没有自…

使用IntelliJ IDEA开发SpringMVC网站(三)数据库配置

原文:使用IntelliJ IDEA开发SpringMVC网站(三)数据库配置摘要 讲解在IntelliJ IDEA中,如何进行Mysql数据库的配置 目录[-] 文章已针对IDEA 15做了一定的更新,部分更新较为重要,请重新阅读文章并下载最新源码。六、数据…

织梦手机网站建设 并配置二级域名

现在手机站很流行,如何用织梦程序建手机站并实现数据同步呢?我们都知道通过开发实现数据同步还是比较麻烦的,咱们就来说下利用织梦自动的手机wap浏览是如何实现手机网站建设并配置二级域名的。首先为织梦安装手机wap浏览模块:找到…

如何管理网站后台

2019独角兽企业重金招聘Python工程师标准>>> 网站上传,域名主机申请后,接着就是管理 这里以实验中心网络后台管理为例: 1 概述 实验中心网络平台管理员后台主要包括:系统参数设置(网站参数管理、计数器初始…

快速生成apk 自动发布到网站 便于测试

遇到的问题: 开发者生成的apk 需要不断给 测试安装让他们测试。有没有脚本自动将最新apk上传到服务器,让测试自己安装测试呢?mac电脑 怎么自己搭建文件服务器 启动Tomcat功能在这里不在赘述,有不懂的请你多多百度和Google 然后把你的localh…

5首页加载慢_5个 外贸建站谷歌SEO优化技巧

外贸建站谷歌SEO优化技巧 想必是每个外贸建站人员真正关心并且想要熟练掌握的一门学问。同学们可能在很多网站或者博客上看到过相同标题的博客文章,这些文章质量参差不齐内容多种多样,所表达的观点和相关技巧难免会存在一些作者的个人观点。所以当你看了…

获取网站状态码

2019独角兽企业重金招聘Python工程师标准>>> curl -I -m 10 -o /dev/null -s -w %{http_code}"\n" 域名 例子: vim httpstatus.sh #!/bin/bash echo -n "please your domain name: " read domain curl -I -m 10 -o /dev/null -s -w…

大型网站架构系列:缓存在分布式系统中的应用(二)

缓存是分布式系统中的重要组件,主要解决高并发,大数据场景下,热点数据访问的性能问题。提供高性能的数据快速访问。本文是缓存在分布式应用第二篇文章,介绍分布式缓存,Memcache,Redis,本地缓存&…

查看网站上保存的密码

Chrome有个保存账户的功能,点击保存网站账号密码,浏览器下次就记住你的号码了,自己的电脑上这样用很爽,每次点击登录按钮就可以了。但是问题来了,有一天你想在另外一台电脑上登录,忘记密码了。自己电脑上的…

从SEO效果看谷歌百度360搜狗有道bing技术现状

为什么80%的码农都做不了架构师?>>> 从SEO效果看谷歌百度360搜狗有道bing技术现状声音 maybe yes 发表于2015-08-20 16:52 原文链接 : http://blog.lmlphp.com/archives/140/From_the_effect_of_the_SEO_to_see_the_Search_Engine_Company_Google_Baidu…