js固定弹窗背景页面的两种办法【原创】 – 亚原子技术博客

   威廉希尔

        

        

        

        

        在发射研制一道菜中,本人会对决很多的弹窗浏览,即使未标明,伸出窗口涌现后,伸出窗口下的背景页依然可以,为了到达甚至更好的用户体会,本人必需大约做。,伸出窗口涌现后,背景固定不动,舞会窗打开接近末期的,使背景可滑动。柜台刚过去的问题,让我简略地特性描述一下我的意向。:

        办法一和办法二:

        1.率先,本人点击钉钮扣于,弹窗弹窗的刚过去的用手操作,需求获取出席的浏览骨碌条间隔顶部的顶垂线,而且设置浏览的position属性为fixed;当position为fix的时分,浏览来回顶部,此刻,骨碌条从顶部开端的顶垂线,设置浏览的top值为其正数,可以实现固定背景的产生。。

        2.单击紧密的发射标志窗口钉钮扣于时,回复浏览的状态值,从PA顶部设置骨碌条的顶垂线。

        办法三:

        1。伸出窗口,其余的,从t的顶部获取骨碌条的顶垂线;

        2.调整频率浏览骨碌事变,当浏览骨碌时,设置从骨碌条顶部到;

        三。紧密的舞会窗,移动浏览侦听事变。

        以下密码仅供参考:

        //设置变量
var contentStyle = ("content").style;//content是可以骨碌的背景元素id清晰度 
var scrollTop_;//设置背景元素的状态
//办法一:
当发射标志窗口涌现在
function fixed(){
 scrollTop_= 
 contentStyle.position = '固定' contentStyle是其次个变量,将background元素的position属性设置为
 contentStyle.top = "-"+scrollTop_+"px";
}
当舞会窗紧密的时
function fixed_cancel(){
 contentStyle.position ="static";//回复背景元素的position属性(起始值为absolute,就回复为absolute,(诸如此类)
 $(document).scrollTop(scrollTop_);//scrollTop,设置骨碌条的状态
}
//办法2:
当发射标志窗口涌现在
function bind(){
 scrollTop_= 
 (文档).bind(骨碌,function (){
 $(document).scrollTop(scrollTop_); 
 });
}
当舞会窗紧密的时
function unbind(){
 (文档).unbind(骨碌)
}

        转载时请划出出处及实质性的节,本条经久的地址:


        感激的样子您对作者aimee123的涨价,本人会更其竭力的。!即使你想变得一名写,请予以指示我。

没有评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注