Web Widget - Use position attribute absolute and fixed to make a float block

我們的版面上有時會因為內容過多導致需要利用卷軸下拉的情況，而因應內容可能會有一些

選項可以讓您點選，以至於更換目前的內容。因此當我們下拉卷軸時，如果可以自製一個區

塊，能夠隨著卷軸下拉而一起移動，也許會比較方便。

測試環境：Chrome 版本 31.0.1650.57

當卷軸在最上面時，區塊定義的HTML、CSS語法如下：

  1. <style>
  2. #float_block{
  3.    position: absolute; 
  4.    top:150px; 
  5.    margin-left:65px; 
  6.    border:1px solid #4788BA; 
  7.    padding:8px;
  8.    border-top-left-radius: 6px; 
  9.    border-top-right-radius: 6px;
  10.    border-bottom-left-radius: 6px; 
  11.    border-bottom-right-radius: 6px;
  12. }
  13. </style>
  14. .....
  15. .....
  16. <body>
  17. <div id="float_block">
  18.    <img src="images/home.png" width="60" height="60">
  19.    <br>
  20.    <img src="images/news.png" width="60" height="60">
  21. </div>
  22. </body>



當卷軸下拉時，透過JavaScript語法來偵測卷軸的位置，看在哪一個位置來改變CSS語法

內的position attribute，使其變成fixed，如此就不會受位置的影響蓋過區塊。

  1. window.onscroll = function(e){
  2.     if(document.body.scrollTop > 140){
  3.        document.getElementById("float_block").style.position = "fixed";
  4.        document.getElementById("float_block").style.top = "30px";
  5.     }else{
  6.        document.getElementById("float_block").style.position = "absolute";
  7.        document.getElementById("float_block").style.top = "150px";
  8.     }
  9. }


如此一來就可以達到一個簡易的浮動區塊特效，當您往下拉時，也可以去點擊區塊內的項目

來改變分類內容。

留言

張貼留言