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

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

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

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

測試環境：Chrome 版本 31.0.1650.57

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

<style>
#float_block{
   position: absolute; 
   top:150px; 
   margin-left:65px; 
   border:1px solid #4788BA; 
   padding:8px;
   border-top-left-radius: 6px; 
   border-top-right-radius: 6px;
   border-bottom-left-radius: 6px; 
   border-bottom-right-radius: 6px;
}
</style>
.....
.....
<body>
<div id="float_block">
   <img src="images/home.png" width="60" height="60">
   <br>
   <img src="images/news.png" width="60" height="60">
</div>
</body>



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

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

window.onscroll = function(e){
    if(document.body.scrollTop > 140){
       document.getElementById("float_block").style.position = "fixed";
       document.getElementById("float_block").style.top = "30px";
    }else{
       document.getElementById("float_block").style.position = "absolute";
       document.getElementById("float_block").style.top = "150px";
    }
}


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

來改變分類內容。

留言

張貼留言