0

我有一个带有浮动的简单自定义脚本#sidebar。我希望侧边栏保持浮动直到之前，#footer这样它就不会与页脚重叠。

我已经能够在除 IE7 和旧版本之外的所有浏览器中实现这一点。

您可以在此处查看演示：http: //butlimous.hostingsiteforfree.com/test.html

这是页面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!--[if lte IE 7]>
<html xmlns="http://www.w3.org/1999/xhtml" id="ie7-
detected">
<![endif]-->

<![if (!IE)|(gte IE 8)]>
<html xmlns="http://www.w3.org/1999/xhtml">
<![endif]>

<head>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>

<script>
 $(document).ready(function(){
 $(window).scroll(function () {   

 if($(window).scrollTop() > 100) {
    $('#sidebar').css('position','fixed');
    $('#sidebar').css('top','0');

     if($('#ie7-detected').length == 1) {
       $('#sidebar').css('marginLeft','6px');
    }
    else {
       $('#sidebar').css('marginLeft','508px');
    }       
 }

 else if ($(window).scrollTop() <= 100) {
      $('#sidebar').css('position','');
      $('#sidebar').css('top','');
      $('#sidebar').css('marginLeft','');  
 }
 
 if (($('#footer').offset().top - $('#sidebar').offset().top <= 612)) {

 var sidebar_pos = 612 - parseInt($('#footer').offset().top - $('#sidebar').offset().top);
 $('#sidebar').css('top', '-' + sidebar_pos + 'px');

 }
 });
});
</script>

<body style="margin:0;padding:0;">

<div style="width:1000px;margin:0 auto;">

<div id="header" style="height:100px;border:1px solid #000000;clear:both;">
</div>

<div id="sidebar" style="float:right;height:600px;border:1px solid #000000;width:490px;">
 </div>

<div class="post" style="height:300px;width:500px;float:left;border:1px solid #000000;margin-bottom:10px;">
</div>

<div class="post" style="height:300px;width:500px;float:left;border:1px solid #000000;margin-bottom:10px;">
</div>

<div class="post" style="height:300px;width:500px;float:left;border:1px solid #000000;margin-bottom:10px;">
</div>

<div id="footer" style="height:100px;border:1px solid #000000;clear:both;">
</div>

</div>

在 IE7 中浮动不一致，有时与页脚重叠，有时不重叠。

另一个问题是，在滚动时的某个像素处，#sidebar完全脱离了屏幕。

请记住，文档高度不是固定的，因为某些页面的帖子数量可能与其他页面不同，这与我制作的演示不同。

4

0 回答 0