1.給該區(qū)域加個ref屬性，使用this.$refs.refName獲取該區(qū)域；
2.獲取該區(qū)域的高度；
3.監(jiān)聽該區(qū)域滾動事件，獲取該區(qū)域的scrollTop數(shù)值（this.$refs.refName..addEventListener('scroll', function() {})）
4.與高度進(jìn)行計算，計算出百分比，設(shè)置個data存儲這變量實(shí)時顯示

scrollTop + clientHeight = offsetHeight

這樣

let scrollPoint = el.scrollHeight/(el.clientHeight/2);

el是你想要進(jìn)行計算的元素

需要通過js來監(jiān)聽瀏覽器滾動的距離，當(dāng)滾動到多少距離的時候，我們來設(shè)置div的position參數(shù)。

<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">
 內(nèi)容
</div>

js中代碼：

function onscroll(distance){//s滾動的距離，offset默認(rèn)為元素距離頂部的距離    
    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());

來源：fly63.com

// 頁面總高
var totalH = document.body.scrollHeight || document.documentElement.scrollHeight

// 可視高
var clientH = window.innerHeight || document.documentElement.clientHeight


window.addEventListener('scroll', function(e){
    // 計算有效高
    var validH = totalH - clientH

    // 滾動條卷去高度
    var scrollH = document.body.scrollTop || document.documentElement.scrollTop

    // 百分比
    var result = (scrollH/validH*100).toFixed(2)
    console.log(result)
})