JQuery 修复了 IE7 中的滚动问题答案

【问题标题】：JQuery Fixed Scrolling issue in IE7JQuery 修复了 IE7 中的滚动问题
【发布时间】：2012-08-30 19:30:34
【问题描述】：

我正在尝试根据用户向下滚动页面并备份它的距离使这个 .side_content_wrapper 变为固定或静态。我让它在 IE8+/chrome/firefox 中运行良好。但由于某种原因，我无法让它在 IE7 中工作。我做错了吗？

感谢您的帮助！

$(window).scroll(function(e){

var scrollAmount = $(window).scrollTop();
var documentHeight = $(document).height();
var heightFromBottom = documentHeight - scrollAmount;
$el = $('.side_content_wrapper'); 

if((scrollAmount > 320 && heightFromBottom > 950) && $el.css('position') != 'fixed') {
    fixToScroll();}

else if (scrollAmount < 320 && $el.css('position') == 'fixed') {
    fixToStatic();}

if(heightFromBottom <= 950 && $el.css('position') == 'fixed') {
    fixToBottom();} 

else if((heightFromBottom > 950 && scrollAmount > 320) && $el.css('position') == 'fixed') {
    fixToScroll();}


function fixToScroll() { 
    $('.side_content_wrapper').css({'position': 'fixed', 'top': '35px', 'right': '218px'});
}
function fixToStatic() { 
    $('.side_content_wrapper').css({'position': 'static', 'top': '0px', 'right': '0px'}); 
}
function fixToBottom() { 
    $('.side_content_wrapper').css({'position': 'fixed', 'bottom': '400px', 'top': 'inherit', 'right': '218px'}); 
}
});

【问题讨论】：

哪个部分不起作用？滚动距离检测还是位置变化？你有任何错误吗？
我尝试使用 IE Developer 工具进行调试，但没有出现任何错误。我认为我在 IE 无法正确读取的地方有一些语法错误。它不会检测到距离，直到我到达页面底部然后它会改变位置。
检查您的文档模式以确保您符合 IE7 标准（而不是怪癖模式或兼容模式或 MS 决定放入其中的任何其他愚蠢的东西）。我已经读到position: fixed 在 IE7 中存在一些问题，具体取决于浏览器所处的模式。
是的，它在 IE7 标准中：/

标签： jquery internet-explorer-7 scroll css-position

【解决方案1】：

我想通了：

$(document).ready(function () {
    var div = $('.fixed_floater');
    var offset = div.offset();
    var top = offset.top;
    $(window).scroll(function() {
        var heightFromBottom = $(document).height() - $(window).scrollTop();
        var y = $(this).scrollTop();

        if (y >= top && heightFromBottom > 950) {
            div.css({'position': 'fixed', 'top': '0px'});
        } else {
            div.css({'position': 'static'});
        }

        if (heightFromBottom <= 950)
            div.css({'position': 'fixed', 'bottom': '390px', 'top': 'auto'});
    });
});

【讨论】：