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

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

javascript jquery html css

Javascript Jquery偏移顶部和固定位置在IE7中不一致,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个简单的自定义脚本，带有浮动的#边栏。我希望侧边栏在#页脚之前保持浮动，这样它就不会与页脚重叠除了IE7和更旧的浏览器之外，我已经能够在所有浏览器中实现这一点您可以在此处查看演示：这是页面的代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-

我有一个简单的自定义脚本，带有浮动的

#边栏

。我希望侧边栏在

#页脚

之前保持浮动，这样它就不会与页脚重叠

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

您可以在此处查看演示：

这是页面的代码：

<!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>


$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>100）{
$（'#侧边栏'）.css（'position'，'fixed'）；
$（'#侧边栏'）.css（'top'，'0'）；
如果（$（'#检测到ie7'）。长度==1）{
$（'侧边栏'）.css（'marginLeft'，'6px'）；
}
否则{
$（'侧边栏'）.css（'marginLeft'，'508px'）；
}       
}
else if（$（window）.scrollTop（）我知道，但不幸的是，旧版本仍然在世界范围内使用：（这可能会帮助您，它们在世界范围内使用，但IE7在世界范围内的市场份额不到0.5%。），所以这可能意味着要支持的工作量不成比例。此外，任何使用旧a浏览器的人都会习惯于所有东西都有一点点破损。就连谷歌两年前也停止了对它的支持：