[筆記] 計算網頁底部位置，當網頁達到底部時才產生效果─jQuery

有時候，在寫jQuery的時候，我們會希望有些效果是當網友卷到網頁底部時才產生，例如像是有些網頁提供「向下鍵」讓網友點選，可是當到了頁底的時候，我們希望這個向下鍵能夠消失，到底要怎麼樣計算網頁底部的位置來達到這樣的效果呢？

本次會學習到的函數共包含：

$(window).scroll()：當卷軸右邊的視窗轉動時
$(變數).height()：得到某變數的高度。
$(window).scrollTop()：當下可視網頁最高點到網頁頂端的距離。

首先，我們要對一些語法先有一些了解，首先，我們要區分body和window的差別。

body指的是整個網頁，而body的高度，指的就是整個網頁的高度，一般來說網頁的內容越多，整個網頁的高度也越高。

window則是指網頁的「可視範圍」（就是你現在看著你的螢幕，瀏覽器的高度），而window的高度，指的就是一個可視範圍內的高度，只要你的螢幕大小不變，不管你的網頁內容再怎麼增加，window的高度都是不會變的。

另外一個是叫做scrollTop，這表示的是，你網頁右邊的那個卷軸到最上端網頁的距離有多少

有了這三個東西，其實我們就可以算出時麼時候網友的捲軸已經滾動到最底端了。

因為當網友卷軸捲到頁底的時候，它的ScrollTop+Window會等於Body的高度。

知道了這些概念後，我們就可以寫jQuery的語法了：

$(window).scroll(function(){
    last=$("body").height()-$(window).height()
    if($(window).scrollTop()>=last){
    $(".down").hide()
    }
})

這裡的語法的意思是，我把body-window取名做變數last，而當我的ScrollTop=body-window時（也就是達到頁底時），幫我隱藏掉名為down這個css樣式。

有些時候，網友並不會完全將網頁捲到底部，這時候down就不會消失，為了讓網友在網頁接近底部時，就把down樣式消失掉，我們可以在下面預留一段空間（例如50px，如下圖橘色線段），這樣只要網友的捲軸捲到網頁底部50px以內時，down這個樣式就會消失。

語法只需要做一點點修改就可以了：

$(window).scroll(function(){
     //最後一頁scrollTop=body-window，50是預留空間
     last=$("body").height()-$(window).height()-50
     if($(window).scrollTop()>=last){
     $(".down").hide()
     }
})

透過類似的方法，我們也可以寫出當網友捲到某個位置時，就會產生某些動畫的效果。