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

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

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

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

然后自己寫了個(gè)懶加載的，也很簡(jiǎn)單，最基礎(chǔ)的代碼【不喜勿噴，但蠻實(shí)用的】

wap手機(jī)端懶加載分頁(yè)：

用之前先引用下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 + "頁(yè)");
  //這里放你的分頁(yè)代碼
  }
 });
 });

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

web電腦端懶加載分頁(yè)：

用之前先引用下jquery.js

var current = 1;
 $(function() {
  window.onscroll = function() {
  if($(document).scrollTop() >= ($(document).height() - $(window).height() - 150)) {//150與wap手機(jī)端一樣
   current++;
   //這里放你的分頁(yè)代碼
  }
  }
 });

if($(document).scrollTop()==0){//這是web刷新代碼，有需要請(qǐng)結(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ù)頁(yè)面的內(nèi)容高度
  $(".footer").addClass("position");
  } else {//.position見(jiàn)css
  $(".footer").removeClass("position");
  }
 }

另一種方法【推薦】

function auto() {
  $("body").scrollTop(1); //控制滾動(dòng)條下移1px 
  if($("body").scrollTop() > 0) {
  $(".footer").removeClass("position");
  alert("有滾動(dòng)條");
  } else {
  $(".footer").addClass("position");
  alert("沒(méi)有滾動(dòng)條");
  }
  $("body").scrollTop(0); //滾動(dòng)條返回頂部 
 }

附上兩張前后對(duì)比圖，footer固定底部

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

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