js 實現遮罩某一部分

借用一下喜馬拉雅的效果圖，比較一下下面的遮罩層的高度：

     

我們可以看到它的遮罩層一直都是只遮住的下面。開始想着怎么用CSS實現，幾經測試也沒弄出來，如果正在看這篇文章的你，知道如何用CSS達到這種效果，歡迎留言。

我來說一下我用js的解決方法。

原理很簡單，遮罩層高度 = 選集彈層的下邊距離 到 窗口底邊的距離。

 

先看下結構：

 

實現效果核心代碼：

$(".js_show_chapter").click(function () {
    var maskHeight;
    var obj = $('.js_chapter_wrap');
    var wh = $(window).height();//窗口高度
    var objOffsetTop = obj.offset().top; //選集彈層到頂部的距離
    var docScrollTop = $(document).scrollTop();//滾動條到頂部的距離
    maskHeight = wh - (objOffsetTop - docScrollTop);//計算遮罩層高度
    $(".mask").height(maskHeight + 'px');
})

 

最后顯示效果如下圖：

 

需要完整案例的可在下方留言~感謝閱讀~