懶加載實現(xiàn)的分頁&&網(wǎng)站footer自適應

更新時間：2016年12月21日 16:46:37 作者：袁小濺

本文主要介紹了wap手機端懶加載分頁，web電腦端懶加載分頁以及web電腦端footer底部固定。具有很好的參考價值，下面就跟著小編一起來看下吧

最近在做手機端，發(fā)現(xiàn)下拉刷新和上拉加載的jq控件很少而且自我感覺不好用，比如iscroll之類……

然后自己寫了個懶加載的，也很簡單，最基礎的代碼【不喜勿噴，但蠻實用的】

wap手機端懶加載分頁：

用之前先引用下jquery.js

var current = 1;
 $(function() {
 $('body').bind('touchmove', function(e) {
  if($(this).scrollTop() > ($(window).height() * current - 150)) {//這里的150表示距離底部150像素觸發(fā)，可自行調(diào)節(jié)
  current++;
  console.log("第" + current + "頁");
  //這里放你的分頁代碼
  }
 });
 });

if($(this).scrollTop()==0){//這是wap刷新代碼，有需要請結(jié)合使用}

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刷新代碼，有需要請結(jié)合使用}

web電腦端footer底部固定：

 .footer.position {
 position: absolute;
 bottom: 0;
 }

$(function() {
  auto();
  window.onresize = function() {
  auto();
  }
 });
 function auto() {
  if($(window).height() > 917) {//917可自行調(diào)整，根據(jù)頁面的內(nèi)容高度
  $(".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固定底部

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章:

jQuery Dialog 打開時自動聚焦的解決方法(兩種方法)
這篇文章主要介紹了jQuery Dialog 打開時自動聚焦的解決方法,及jquery dialog打開時，自動聚焦在第一個控件上的方法，對jquery dialog相關知識感興趣的朋友通過本文一起學習吧
2016-11-11
JQuery中DOM事件合成用法實例分析
這篇文章主要介紹了JQuery中DOM事件合成用法,以實例形式分析了hover()方法和toggle()方法實現(xiàn)事件合成的相關技巧,需要的朋友可以參考下
2015-06-06
jQuery學習筆記之DOM對象和jQuery對象
DOM對象和jQuery對象的操作時很重要的，是jquery與頁面元素互動的基礎。
2010-12-12
Jquery中attr與prop的區(qū)別詳解
在高版本的jquery引入prop方法后，什么時候該用prop？什么時候用attr？它們兩個之間有什么區(qū)別？這些問題就出現(xiàn)了。下面這篇文章主要給大家介紹了Jquery中attr與prop區(qū)別的相關資料，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-05-05
判斷jQuery是否加載完成,沒完成繼續(xù)判斷的解決方法
下面小編就為大家分享一篇判斷jQuery是否加載完成,如果沒完成繼續(xù)判斷的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2017-12-12
jquery load()在firefox(火狐)下顯示不正常的解決方法
覺得應該是由于直接將www.baidu.com的內(nèi)容放到div中,對于較嚴格的FireFox可能不會處理用cssviewter查看處理后的頁面源碼果然發(fā)現(xiàn)div中為空
2011-04-04
深入了解query和params的使用區(qū)別
這篇文章主要介紹了深入了解query和params的使用區(qū)別，路由傳參的時候，有倆兄弟，一個叫query，一個叫parmas，你說他們倆長得也不像吧，可這用法實在是太類似了，下面就讓我們分別從vue路由和Node接收兩個角度講他們的區(qū)別,需要的朋友可以參考下
2019-06-06
jquery 判斷滾動條到達了底部和頂端的方法
這篇文章主要介紹了jquery 判斷滾動條到達了底部和到達頂端的方法,需要的朋友可以參考下
2014-04-04
Jquery EasyUI Datagrid右鍵菜單實現(xiàn)方法
這篇文章主要為大家詳細介紹了Jquery EasyUI Datagrid右鍵菜單的實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
jQuery實現(xiàn)火車票買票城市選擇切換功能
本文通過實例代碼給大家分享了jQuery實現(xiàn)火車票買票城市選擇切換功能，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2017-09-09