方法一:纯css样式直接控制,滚动时固定不动
css
#di_float{width:100px;height:150px;border:1px solid #f00;position:fixed;
right:0;top:100px;background:#DBEAF9;}
html
<div id="di_float"></div>
方法二:css+js控制,滚动时固定不动
css
#di_float{width:100px;height:150px;border:1px solid #f00;position:fixed;right:0;
top:100px;background:#DBEAF9;_position:absolute;
_top:expression(documentElement.scrollTop+100)}
html
<div id="di_float"></div>
方法三:jq控制,滚动时来回跳动最后--固定不动
css
#di_float{width:100px;height:150px;border:1px solid #f00;position:absolute;right:0;
top:100px;background:#DBEAF9;}
html
<div id="di_float"></div>
js
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
var oldT = 100;
var T = $("body").scrollTop();
T = T + oldT + "px";
setTimeout(function(){$("#di_float").css("top",T);},200);
})
})
</script>
//本文来源于网络,本人总结起来并优化,分享给有需要的前端朋友,如有侵权,请联系删除,也请指正、批评