为了账号安全,请及时绑定邮箱和手机立即绑定

关于javascript实现的网站页面侧边悬浮框"抖动"问题

关于javascript实现的网站页面侧边悬浮框"抖动"问题

MMMHUHU 2018-12-07 05:03:05
以下是做的侧边悬浮框,但是会发现每当滚动条滚动时,悬浮框都会抖动,而浏览了一些其他网站,发现他们的悬浮框都不会抖动,这是如何实现的? <!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style> *{margin:0px; padding:0px;} body{height:2000px;} #div1{width:100px; height:200px; background:orange; position:absolute; left:0px; top:200px;}</style><script> window.onload = function(){ var oDiv = document.getElementById("div1"); window.onscroll = window.onresize = function(){ var oScrollH = document.documentElement.scrollTop || document.body.scrollTop; oDiv.style.top = 200 + oScrollH + "px"; }; };</script></head> <body><div id="div1"></div></body></html>
查看完整描述

8 回答

?
料青山看我应如是

TA贡献1772条经验 获得超8个赞

#div1{
position:fixed; _position:absolute; _bottom:auto; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))); } *html{ background-image:url(about:blank); background-attachment:fixed; }

兼容IE6的css hack,按照你的需求改一下top位置就行。

另外,国外仍有很多用户使用windows2000,IE版本5.5的。

因为国内几乎都是盗版,所以造成了IE6没人用的错觉。

查看完整回答
反对 回复 2018-12-24
?
Smart猫小萌

TA贡献1911条经验 获得超7个赞

不需要js,直接改成position:fixed;

查看完整回答
反对 回复 2018-12-24
?
暮色呼如

TA贡献1853条经验 获得超9个赞

@张云山: 感谢你的回答,但是position:fixed在IE6下是不支持的,那么在IE6下有解决的方法么?

查看完整回答
反对 回复 2018-12-24
?
冉冉说

TA贡献1877条经验 获得超1个赞

@流炎飞雪: 现在的时代还需要兼容IE6吗?

 


position:fixed;

/*为了让DIV永远在最前面,不被其他元素遮住*/

_position:absolute;/*这里开始的2句代码是为ie6不兼容position:fixed;而写的*/ 

查看完整回答
反对 回复 2018-12-24
?
素胚勾勒不出你

TA贡献1827条经验 获得超9个赞

@流炎飞雪: 我的意思是现在一般不用考虑IE6了,不过你要是真想兼容ie6也不是没有办法,你可以还是用position:absolute方法,但这个对象有个父级必须是跟浏览器窗口大小一样就好了。

查看完整回答
反对 回复 2018-12-24
?
拉风的咖菲猫

TA贡献1995条经验 获得超2个赞

@张云山: 感谢你的回复,我试了下加父级,但是还是实现不了,和子级的效果是一样的,不知道能再说的具体点么?

查看完整回答
反对 回复 2018-12-24
  • 8 回答
  • 0 关注
  • 674 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号