[請益] 頁面滾動浮出按鈕

看板Web_Design作者 (自由的ccc)時間11年前 (2014/07/28 20:24), 編輯推噓2(2027)
留言29則, 7人參與, 最新討論串1/1
大家晚安 最近想幫自己部落格的手機版介面加按鈕 (blogger的行動版範本) 主要是想像下面這個網站這樣: http://www.sogi.com.tw/m/mobile 頁面往上滾動會出現按鈕,往下滾動時會隱藏 查了jQuery的scroll好像也沒有類似的範例 js的onscroll好像跟上面那個差不多 不知道要用什麼關鍵字去搜尋 還是各位有推薦的範例可以學習的? google找超久只好上來請教大家了~ -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 125.230.215.72 ※ 文章網址: http://www.ptt.cc/bbs/Web_Design/M.1406550272.A.B16.html

07/28 23:07, , 1F
讀取滾動前後的scrolltop 然後判斷是上滾還是下滾
07/28 23:07, 1F

07/28 23:07, , 2F
(如何判斷就是相減就好) 後面應該不用教了吧?
07/28 23:07, 2F

07/29 11:16, , 3F
感謝樓上~ 我再研究怎麼寫(小弟新手不一定寫得出來 囧)
07/29 11:16, 3F

07/29 14:11, , 4F
這個頁面是無限卷軸加判斷卷軸,老實說,我覺得超難用
07/29 14:11, 4F

07/29 14:12, , 5F
多參考其他電腦版的網站TOP鈕的寫法就可以弄出來了
07/29 14:12, 5F

07/29 15:43, , 6F
我只要判斷捲軸就好,我的網站還不需要無限捲軸(汗)
07/29 15:43, 6F

07/29 15:47, , 7F
http://jaru.qr.ai 類似這個網站的效果
07/29 15:47, 7F

07/29 17:56, , 8F
無限捲軸也很簡單= =
07/29 17:56, 8F

07/29 17:57, , 9F
通通是透過判斷捲軸的方式
07/29 17:57, 9F

07/29 17:58, , 10F
無限卷軸叫做下拉加載或是滑動加載吧
07/29 17:58, 10F

07/29 17:59, , 11F
至於你哪個部分有問題,要說出來,不然沒法幫你
07/29 17:59, 11F

07/29 18:00, , 12F
你先從可以取到scrollTop的位置開始吧
07/29 18:00, 12F

07/29 18:01, , 13F
一步驟一步驟來,另外 JQ的方法是 $(window).scrollTop();
07/29 18:01, 13F

07/29 23:05, , 14F
我承認我卡在計算頁面上滾下滾那邊 是要var兩個scrollTop
07/29 23:05, 14F

07/29 23:05, , 15F
嗎 ?
07/29 23:05, 15F

07/29 23:55, , 16F
A - B
07/29 23:55, 16F

07/30 09:46, , 17F
我說的超難用指的是對使用而言,這個頁面頗卡...
07/30 09:46, 17F

07/30 09:46, , 18F
07/30 09:46, 18F

07/30 09:47, , 19F
哎呀!空白按太多..
07/30 09:47, 19F

07/30 09:48, , 20F
主要是一開始的scrollTop跟加載後的scrollTop不一樣
07/30 09:48, 20F

07/30 09:49, , 21F
所以加載後,scrollTop也要更新
07/30 09:49, 21F

07/30 09:56, , 22F
最智障的設計莫過於網站的次要功能全部做在底下
07/30 09:56, 22F

07/30 09:56, , 23F
+無限捲軸捲動....永遠拉不到底
07/30 09:56, 23F

07/30 09:57, , 24F
尤其是次要功能還有聯絡管道的時候..根本沒人能聯絡到
07/30 09:57, 24F

07/30 10:35, , 25F

07/30 10:35, , 26F
這功能就是你要的,你再把位置放對就好
07/30 10:35, 26F

07/31 16:59, , 27F
我碰過alog大說的那種,明顯是設計完成一段時間後事後
07/31 16:59, 27F

07/31 16:59, , 28F
加上的,當下真是又好氣又好笑
07/31 16:59, 28F

08/07 09:29, , 29F
無限卷軸 又放在底下 你是怎麼找到的?
08/07 09:29, 29F
文章代碼(AID): #1Jra40iM (Web_Design)