调整浏览器大小时重置css或脚本

Question

这可能很难解释，但是说我的浏览器尺寸很小，如图1所示。底部文本位于应该的位置，当我向下滚动脚本激活时。

编辑 https://jsfiddle.net/j4f53rds/1/

function fixDiv() {
    var $div = $("#nav_color");
    var top = $div.data("top");
    if ($(window).scrollTop() > top) {
        $('#nav_color').css({'position': 'fixed', 'top': '0px'}); 
    }
    else {
        $('#nav_color').css({'position': 'absolute', 'top' : top + 'px'});
    }
}

$("#nav_color").data("top", $("#nav_color").offset().top); 
$(window).scroll(fixDiv);

当用户向下滚动时，脚本会使底部的文本固定在html的顶部。现在问题来了。触发后，如果我调整浏览器大小，请将其设为全屏，如图2所示，然后向上滚动。文本没有重新定位，它将是新位置，它会重置回较小浏览器中的原始位置。当用户向上滚动时，如何让脚本考虑新的浏览器大小？

Answer 1

问题是您在页面加载时保存了顶部位置，但是在调整窗口大小时该位置会发生变化。试试这个：

$(window).resize(function() {
    $("#nav_color").data("top", $("#nav_color").offset().top); 
    fixDiv(); //not sure if you need this.
});

Answer 2

问题在于，您的top:内联CSS属性是否会粘贴到#nav_color元素，并且在调整大小时不会重新计算，

试试这个（变量top定义仍然不完美..）：

var top = $("#nav_color").offset().top; 

function fixDiv() {
    var $div = $("#nav_color");
   // var top = $div.data("top"); shouldn't define it here  
    console.log(top);
    if ($(window).scrollTop() > top) {
        $('#nav_color').css({'position': 'fixed', 'top': '0px'}); 
    }
    else {
        $('#nav_color').css({'position': 'absolute', 'top' : top + 'px'});
    }
}
$(window).scroll(fixDiv);

function positionDiv() {
    top = ($(window).innerHeight())*0.86;
    if ($("#nav_color").css('position') == 'absolute'){
        $("#nav_color").css({ 'top': top });
    }

}
$(window).resize(positionDiv);

fiddle

Answer 3

你需要在window.resize上调用函数 您可以将您的功能称为：

$(window).resize(function(e) {
    $("#nav_color").data("top", $("#nav_color").offset().top()); 
    fixDiv(); //not sure if you need this.
});

Answer 4

这应该有效：

$addHandler(window, "resize", fixDiv);

每次用户调整窗口大小时，都会触发函数fixDiv