html通過css,js實現div懸浮效果總匯，如原生JS實現滾動到一定位置實現div懸浮

在我們的實際開發中，經常會遇到頁面中需要懸浮效果，比如最早的客服聯系，對聯懸浮廣告等，今天為大家介紹一些如何實現div懸浮的效果。

 

傳統的fixed實現：

通過css中的屬性position參數設為fixed,理由它相對於瀏覽器為絕對位置，通過設置right和bottom，使得div固定在右下角。例如：

.demo{
    position: fixed;bottom: 10px;right: 10px;
}

 

但是這種實現，從一開始就懸浮在瀏覽器的右下角了。可以滿足我們絕大多數需求，但是有時候會遇到這種情景：當我們瀏覽器滾動條到某個位置的時候，才觸發div懸浮效果。下面將來介紹：

 

原生JS實現滾動到一定位置，實現div懸浮

實現方法是：需要通過js來監聽瀏覽器滾動的距離，當滾動到多少距離的時候，我們來設置div的position參數。具體如下：

<style>
*{
 margin: 0;padding: 0;
}
body{
 height: 1500px;
}
.demo{
 position: relative;left: 10px;top: 10px;z-index:9;width: 500px;height: 200px;background: #F0AD4E;
}
</style>
//html
<p style="height: 100px;">測試</p>
<div class="demo" id="demo">
 內容
</div>

 

 

js中代碼：

function onscroll(distance){//s滾動的距離，offset默認為元素距離頂部的距離    
    var s = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
        dom = document.getElementById('demo'),
        offset= dom.offsetTop || distance;
    dom.style.position=s>offset?"fixed":"relative";
};
window.addEventListener('scroll',onscroll());

 

 

擴展：通過上面的js方法，同樣可用實現讓div到達多少距離的時候，實現顯示或者隱藏， 比如我們需要做返回頂部的功能，當距離達到多少的時候就顯示出來，

<a href="javascript:scrollTo(0,0);" id="demo">返回頂部</a>