添加window.resize函数以使脚本在浏览器调整大小时重置

Question

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

它应该做什么（粘性div到顶部）： https : //jsfiddle.net/j4f53rds/3/

我现在所拥有的（我尝试添加以下代码）

$(window).resize(function() {
$("#nav_color").data("top", $("#nav_color").offset().top); 
fixDiv(); 
});

https://jsfiddle.net/j4f53rds/2/

这是原始代码：

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

我认为您可以这样操作：

小提琴

#nav {
    position: absolute;
    width: 100%;
    bottom: 0px;
    border: solid 1px;
    height: 160px;
}