有時候,在寫jQuery的時候,我們會希望有些效果是當網友卷到網頁底部時才產生,例如像是有些網頁提供「向下鍵」讓網友點選,可是當到了頁底的時候,我們希望這個向下鍵能夠消失,到底要怎麼樣計算網頁底部的位置來達到這樣的效果呢? 本次會學習到的函數共包含:
$(window).scroll(): 當卷軸右邊的視窗轉動時
$(變數).height() :得到某變數的高度。
$(window).scrollTop() :當下可視網頁最高點到網頁頂端的距離。 首先,我們要對一些語法先有一些了解,首先,我們要區分body和window的差別。 body 指的是整個網頁,而body的高度,指的就是整個網頁的高度,一般來說網頁的內容越多,整個網頁的高度也越高。 window 則是指網頁的「可視範圍」(就是你現在看著你的螢幕,瀏覽器的高度),而window的高度,指的就是一個可視範圍內的高度,只要你的螢幕大小不變,不管你的網頁內容再怎麼增加,window的高度都是不會變的。 知道了這些概念後,我們就可以寫jQuery的語法了:
$(window).scroll(function(){
    last=$("body").height()-$(window).height()
    if($(window).scrollTop()>=last){
    $(".down").hide()
$(window).scroll(function(){
     //最後一頁scrollTop=body-window,50是預留空間
     last=$("body").height()-$(window).height()-50
     if($(window).scrollTop()>=last){
     $(".down").hide()
  • [筆記] PHP:判斷檔案是否存在,並將檔案刪除
  • [筆記] 將php變數引入javascript中
  • [筆記] 建立分享社交社群(Facebook、Goole+、pinterest)的浮動按鍵—jQue...
  • jQuery學習筆記 第八堂-3(單頁式網頁設計:製作回到網頁頂端按鈕)
  • jQuery學習筆記 第八堂-2(單頁式網頁設計:mousewheel功能)
  • [教學] jQuery學習筆記 第八堂-1(單頁式網頁設計:浮動導覽列垂直置中)
  • 如何利用Bootstrap的標籤(Tabs)和導覽列(Navigation Bar)
  • [教學] PHP & MySQL 學習筆記 第13堂(留言板建置:後台設計)
  • [教學] PHP & MySQL 學習筆記 第13堂(留言板建置:前台設計)
  • [筆記] CSS垂直置中的方法
  • [筆記] 好用的css 3新單位vh vw ─ 讓你的圖片可以隨著螢幕大小而不同
  • [筆記] 計算網頁底部位置,當網頁達到底部時才產生效果─jQuery
  • [筆記] 縮小圖片檔案大小卻又不失品質的好方法─JPEGmini
  • [筆記] 如何使用Font Awesome所提供的各種icon
  • [筆記] 將HTML中的INPUT標籤套用CSS樣式
  • [教學] PHP & MySQL 學習筆記 第12堂(資料庫建置:設定呈現於頁面的資料筆數)
  • [教學] PHP & MySQL 學習筆記 第11堂(資料庫建置:資料庫排序並於網頁呈現)
  • [教學] PHP & MySQL 學習筆記 第十堂(PHP MyAdmin帳號密碼管理)
  • [教學] jQuery學習筆記 第七堂(animate使用:製作輪撥式廣告看板)
  •