2015年4月12日

[筆記] 計算網頁底部位置,當網頁達到底部時才產生效果─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()
     }
})

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

0 意見:

張貼留言