pCloud Partner Program

'fixed'相關日誌共 1 篇

  1. 2012/09/04 半浮動DIV區域 part2

半浮動DIV區域 part2

程式技術/Javascript 2012/09/04 17:35
views: 123325 times
才寫了"半浮動DIV區域"這個文章 (link), 又發現還有另一種應用情境, 就是捲到下面, 若半浮動區域的底部觸到了 footer , 則要順勢往上, 不再固定.

參考應用如: http://www.yinshiweb.com/ 右側的側欄.

先來看看原始的長相, 一樣是上面 top, 中間 main, 並含有 content 及 flow_div 兩個區域, 還有最下方的 footer. 不含捲動的狀況如: http://sample.diary.tw/29/o.htm

接下來要加上程式碼, 原來的半浮動DIV區域, 只需要用 CSS 配合捲動 event 就可以達成, 但若在浮動區域觸底時, 要跟著捲動上去, 就必須將該 absolute css 的 top 位置用 footer 的 top 減去 flow_div 的高度才行, 不過這個值是動態的, 所以就只能在 runtime 時, 用 jQuery 的 css 屬性來給定, 先看浮動及跟著捲的兩個狀態配合的 css:



其中的 absolute 的 top 得由後面的程式來給定及移除, javascript 如下:

一樣要先算出 top 及 top2 兩個值, 然後在 scroll event 中判斷三種狀況,
state 1. 原始狀態, 還沒捲到 flow_div
state 2. 捲到 flow_div 了, 但底部還未頂到 footer
state 3. 捲到 flow_div 底部頂到 footer 了


完成的結果請參考: http://sample.diary.tw/29/2.htm
top




Nextbit Robin 5.2吋六核心智慧型手機 Microsoft Office 365 中文家用版PKC (無光碟)
ASUS華碩 AC1900 雙頻無線路由器 RT-AC68U 美國 VORNADO 533 渦流空氣循環機 (黑色)
御茶園 每朝健康綠茶(650mlx24入) 每朝健康 雙纖綠茶(650mlx24入)


 Waiting...