fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器

前端技术 2023/09/03 JavaScript 

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>fixedBox</title>
<script id=\"xcore\" type=\"text/javascript\" src=\"http://www.haiqiancun.com/xWidget-0.1/xcore.js\"></script>
<style>
*{margin:0px;padding:0px;} body{height:3000px;}
</style>
<script>
$(function() { $(\".fixedBox\").each(function() { 
var self = $(this); 
var id = self.attr(\"id\") || \'fixedBox_\' + Math.round(Math.random() * 100000); self.attr(\"id\", id); 
var fb = $(\"#\" + id); 
var mt = Math.floor(fb.css(\"margin-top\").substring(2, 0)) || 0; 
var cd = $(\'<div style=\"height:\' + fb.outerHeight() + \'px;display:none;\' + fb.attr(\"style\") + \'\"> </div>\'); fb.after(cd); fb.css({
\'z-index\': 999
}).data({
\'top\': fb.offset().top,
\'left\': fb.offset().left
}); $(window).scroll(function() { 
var pt = fb.data(\'top\'); 
var pl = fb.data(\'left\'); var st = $(document).scrollTop() - 10; 
var h = $(document).height(); 
if (st > pt || st == pt) { cd.show(); 
if ((st + self.outerHeight()) > h) { self.css({
position: \'fixed\',
top: (h - (st + self.outerHeight()))
}); 
} else { self.css({
position: \'fixed\',
top: 0 - mt
}); 
} 
} else { cd.hide(); self.css({
position: \'relative\',
top: 0
}); 
} 
}) 
}) 
}) 
</script>
</span>
</head>
<body>
<div style=\"width:90%;margin:0px auto;\">
<div class=\"fixedBox\" style=\"margin-top:50px; width:100%; overflow:hidden;background:#fff; font-size:12px;\">
<script> $(function(){ $(\".fixedBox\").each(function(){ 
var self= $(this); var id = self.attr(\"id\")||\'fixedBox_\'+Math.round(Math.random()*100000);
self.attr(\"id\",id); var fb = $(\"#\"+id); var mt = Math.floor(fb.css(\"margin-top\").substring(2,0))||0;
var cd = $(\'<div style=\"width:100%;height:\'+fb.outerHeight()+\'px;display:none;\'+fb.attr(\"style\")+\'\"> </div>\');
fb.after(cd); fb.css({\'z-index\':999}).data({\'top\':fb.offset().top,\'left\':fb.offset().left});
$(window).scroll(function(){ var pt = fb.data(\'top\'); var pl = fb.data(\'left\');
var st = $(document).scrollTop()-10; var h = $(document).height(); if(st>pt||st==pt){
cd.show(); if((st+self.outerHeight())>h){ self.css({position:\'fixed\',top:(h-(st+self.outerHeight()))});
}else{ self.css({position:\'fixed\',top:0-mt}); } }else{ cd.hide(); self.css({position:\'relative\',top:0});
} }) }) }) </script>
</div>
例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例
</div>
</body>

</html>

本文地址：https://www.stayed.cn/item/7834

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案