近来在做手机端,发明下拉革新和上拉加载的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牢固底部