javascript - 调整浏览器大小时重置 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 的顶部。现在问题来了。触发后，如果我调整浏览器大小，让它全屏显示，如图二所示，然后向上滚动。文本不会重新定位到它的新位置，它会重置回较小浏览器中的原始位置。当用户向上滚动时，如何让脚本考虑新的浏览器大小？

Answer 1

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

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