html 分页 惰性加载,懒加载实现的分页网站footer自适应

news/2024/5/20 23:22:40/文章来源:https://blog.csdn.net/weixin_32427105/article/details/117881193

最近在做手机端,发现下拉刷新和上拉加载的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固定底部

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持! ad51e517755f8fd6a7ec83ced4ecfaf3.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_819823.aspx

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

相关文章

怎么看网站调用了哪些js_SEO技术-蜘蛛评判网站内容质量高低看哪些细节

“内容为王”这句话是SEO站长一直以来不离口的一句话,从中反映出网站内容是网站排名优化的重中之重。网站内容的质量高低也是影响着蜘蛛评判网站打分的重要因素,一个高质量内容的页面一定是比低质量内容页面收录好,这是毋庸置疑的。对于SEO来…

FOX新剧Fringe #038; 官方网站上的一个小谜题

知道4400被砍后,我郁闷了很久,这个暑假又没啥值得期待的了。随之而来的消息让我整个人立即又振奋起来:今年9月FOX将要推出一部科幻惊悚新剧Fringe。FOX的这个新剧显然是下了血本的,从它的预告片和宣传力度就看得出来。据某些看了第…

注册域名与SEO搜索优化

为什么80%的码农都做不了架构师?>>> 注册域名应该考虑哪些对SEO和网站运营影响 域名是互联网公司和个人网站的无形资产之一,网站的内容、流量都有域名有关系。 一个好的域名对SEO搜索引擎优化和网站运营都有一定的影响。 1、域名的后缀 …

Azure 网站上的 Java

编辑人员注释:本文章由Windows Azure 网站团队的项目经理Chris Compy 撰写。 Microsoft 已推出针对 Azure 网站上基于 Java 的网站的支持。此功能旨在通过Azure 网站的可管理性和轻松扩展选项满足许多常见Java 场景的需求。 门户 UX 中的内…

20个以矩形元素为特色的创意网站设计作品

向社会大众呈现网站内容的方式有很多,这里推荐一组应用方形和矩形元素的网站。人们通常习惯把方形块用于作品集和电子商务网站,因为它是组织和展示作品,如设计,摄影,产品等正方形和长方形元素的最佳方法之一&#xff0…

幻音网站服务器出错,关于页面莫名其妙出现空白的编码错误

在很久之前就发现了这个问题,一般正常的页面是GBK或UTF8的编码格式,但是有些时候会变成一种叫UTF8BOM的编码,一般是不怎么注意的。然而在调试的时候,咦?这怎么多了一块,然后查看源代码,噢&#…

JAVA程序员的学习网站(3)

2019独角兽企业重金招聘Python工程师标准>>> 1.tomcat:http://tomcat.apache.org/2.solr:https://lucene.apache.org/solr/3.ant:http://ant.apache.org/4.maven:http://search.maven.org/ 转载于:https://my.oschina.net/Tsher2015/blog/668208

java物流网站的设计与实现

物流信息网主要用于实现网上自主物流,基本功能包括:登录、查询、时效查询、价格查询、注册等。本系统结构如下: (1)普通用户: 登录:账号、密码; 查询:通过快递编号进行查…

基于java的赛北村旅游网站的设计与实现

塞北村镇旅游网站设计主要用于实现旅游景点信息管理,基本功能包括:主界面模块设计,用户注册模块,旅游景点模块,酒店预订模块,后台管理模块等。本系统结构如下: (1)主界模…

基于java的赛北村旅游网站的设计与实现

塞北村镇旅游网站设计主要用于实现旅游景点信息管理,基本功能包括:主界面模块设计,用户注册模块,旅游景点模块,酒店预订模块,后台管理模块等。本系统结构如下: (1)主界模…

Windows Azure免费空间如何搭建PHP网站/数据库、域名绑定

7月份,阿象为大伙介绍了中国版Windows Azure如何建站、自定义远程虚拟机,最高可选四核、28G内存的服务器,相信不少站长、开发者用户大呼过瘾。不过Azure建站系统仅支持SQL数据库,并不支持大家熟悉的MySQL平台。 那如何搭建PHP网站…

旅游网站的设计与实现

塞北村镇旅游网站设计主要用于实现旅游景点信息管理,基本功能包括:主界面模块设计,用户注册模块,旅游景点模块,酒店预订模块,后台管理模块等。本系统结构如下: (1)主界模…

旅游网站的设计与实现

塞北村镇旅游网站设计主要用于实现旅游景点信息管理,基本功能包括:主界面模块设计,用户注册模块,旅游景点模块,酒店预订模块,后台管理模块等。本系统结构如下: (1)主界模…

基于java的SSM框架的流浪猫救助网站的设计与实现

流浪猫狗救助网站毕业设计使用了spring mvc,spring,mybatis的框架组合。分为前端和后端两部分。 主要功能包括:领养中心,团队活动,领养管理,流浪猫狗管理,志愿者申请,领养列表等。该…

基于java的ssm框架的旅游网站设计与实现

旅游网站毕业设计使用了spring mvc,spring,hibernate的框架组合,前端使用thymleaf模板展示。分为前端和后端两部分。 主要功能包括:游玩路线,游玩攻略,酒店预订,景点预定,用户管理&…

基于ssm框架的名宿网站的设计与实现

该毕业设计使用了spring mvc,spring,mybatis的框架组合,本网站相当于一个平台,有效的将房东和背包客关联起来,房东可以在网站中发布房源,对房源图片可以进行上传展示,有利于吸引客户&#xff0c…

基于java的音乐网站的设计与实现

该毕业设计采用当前较火爆的框架spring boot,从而简化了环境搭建的操作,对于刚学完spring boot框架的同学来说,当前系统具有一定的参考价值。页面炫酷,适合年轻的朋友。 主要功能包括榜单排行,在线播放等,…

java物流网站的设计与实现

物流信息网主要用于实现网上自主物流,基本功能包括:登录、查询、时效查询、价格查询、注册等。本系统结构如下: (1)普通用户: 登录:账号、密码; 查询:通过快递编号进行查…

网站设计之网页制图

在一个空白网页上顶部居中添加一个由四个正方形组成的田字格所用的代码如图一图一做出来的效果图如图二图二转载于:https://blog.51cto.com/12155709/1860820

基于java的赛北村旅游网站的设计与实现

塞北村镇旅游网站设计主要用于实现旅游景点信息管理,基本功能包括:主界面模块设计,用户注册模块,旅游景点模块,酒店预订模块,后台管理模块等。本系统结构如下: (1)主界模…