Question

我有一个浮动#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会完全脱离屏幕。

请记住，文档高度并不固定，因为某些页面的帖子数量可能与其他页面不同，而不像我演示的那样。

在IE7中，Jquery偏移顶部和位置固定不一致

0 个答案: