基于jQuery實(shí)現(xiàn)滾動(dòng)刷新效果
Jquery實(shí)現(xiàn)簡(jiǎn)單的滾動(dòng)刷新效果:
實(shí)際情況使用Ajax獲取后臺(tái)數(shù)據(jù)更新前端頁面即可實(shí)現(xiàn)頁面滾動(dòng)刷新效果
HTML正文:
<form id="form1" runat="server"> <div style="height: 3000px; background-color: yellow;"> </div> </form>
Javascript操作代碼:
$(document).ready(function() { $(window).scroll(function() { //$(document).scrollTop() 獲取垂直滾動(dòng)的距離:最小值為0,最大值:文檔高度-可視化窗口高度 //$(document).scrollLeft() 這是獲取水平滾動(dòng)條的距離 console.log("垂直滾動(dòng)條位置:"+$(document).scrollTop()+"--"+$(window).height()); if ($(document).scrollTop() <= 0) { console.log("滾動(dòng)條已經(jīng)到達(dá)頂部為0"); } /** *$(document).height():文檔的高度 *$(window).height():可視域的高度:窗口的大小:根據(jù)瀏覽窗口的大小變化 *判斷底部:文檔高度<=滾動(dòng)條垂直高度+可視窗口的高度 * */ if ($(document).scrollTop() >= $(document).height() - $(window).height()) { console.log("滾動(dòng)條已經(jīng)到達(dá)底部為" + $(document).scrollTop()); } }); });
效果:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery通過deferred對(duì)象管理ajax異步
這篇文章主要介紹了jQuery通過deferred對(duì)象管理ajax異步的相關(guān)資料,需要的朋友可以參考下2016-05-05基于jquery實(shí)現(xiàn)的上傳圖片及圖片大小驗(yàn)證、圖片預(yù)覽效果代碼
基于jquery實(shí)現(xiàn)的上傳圖片及圖片大小驗(yàn)證、圖片預(yù)覽效果代碼,需要的朋友可以參考下。2011-04-04利用jquery禁止外層滾動(dòng)條的滾動(dòng)
這篇文章主要給大家介紹了利用jquery如何禁止外層滾動(dòng)條的滾動(dòng),文中給出了詳細(xì)的示例代碼,相信對(duì)大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值,有需要的朋友可以參考借鑒,下面來一起看看吧。2017-01-01CSS+jQuery實(shí)現(xiàn)簡(jiǎn)單的折疊菜單
這篇文章主要介紹了CSS+jQuery實(shí)現(xiàn)簡(jiǎn)單的折疊菜單的代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2016-12-12淺析jquery與checkbox的checked屬性的問題
下面小編就為大家?guī)硪黄獪\析jquery與checkbox的checked屬性的問題。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨小編過來看看吧2016-04-04使用jQuery,Angular實(shí)現(xiàn)登錄界面驗(yàn)證碼詳解
這篇文章主要介紹了使用jQuery,Angular實(shí)現(xiàn)登錄界面驗(yàn)證碼詳解,需要的朋友可以參考下2017-04-04jQuery實(shí)現(xiàn)表單步驟流程導(dǎo)航代碼分享
這篇文章主要介紹了jQuery實(shí)現(xiàn)表單步驟流程導(dǎo)航,代碼實(shí)現(xiàn)效果簡(jiǎn)單精致,推薦給大家,有需要的小伙伴可以參考下。2015-08-08flash+jQuery實(shí)現(xiàn)可關(guān)閉及重復(fù)播放的壓頂廣告
本文給大家分享的是仿游戲門戶網(wǎng)站可關(guān)閉及重復(fù)播放泰山壓頂廣告是一款基于jquery實(shí)現(xiàn)的打開網(wǎng)頁緩慢下拉廣告代碼。有需要的小伙伴可以參考下。2015-04-04