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\');
})
最后显示效果如下图：
需要完整案例的可在下方留言~感谢阅读~
版权声明：本文为sese原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。