html页面背景固定,js固定弹窗背景页面的两种办法【原创】

在项目开发的过程中，我们会遇到很多的弹窗页面，如果不做特别说明，弹窗出现后，弹窗底下的背景页面仍然能够滑动，为了更好的用户体验，我们需要做到，弹窗出现后，背景固定不动，弹窗关闭后，才使得背景可滑动。针对这个问题，我简单描述下我的思路：

方法一和方法二：

1.首先，我们点击按钮，弹窗弹窗的这个操作，需要获取当前页面滚动条距离顶部的高度，并且设置页面的position属性为fixed；当position为fix的时候，页面会回到顶部，这个时候之前获取的滚动条距离顶部的高度就发挥作用了，设置页面的top值为其负数，就能够做到固定背景的效果。

2.当点击关闭弹窗按钮的时候，恢复页面的position值，设置滚动条距离顶部的高度为弹窗弹出时滚动条距离页面顶部的高度即可。

方法三：

1.弹出弹窗时，同样先获取当前页面滚动条距离顶部的高度；

2.监听页面的滚动事件，当页面滚动时，设置滚动条距离顶端的距离一直为先前获取的高度；

3.关闭弹窗时，取消页面的监听事件。

以下代码仅做参考：

//设置变量

var contentStyle = document.getElementById("content").style;//content是可以滚动的背景元素id名称

var scrollTop_;//设置背景元素的位置

//方法一:

//弹窗出现时

function fixed(){