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

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

编辑

当用户向下滚动时，脚本会使底部的文本固定在html的顶部。现在问题来了。启动后，如果我调整浏览器的大小，比如说使其全屏，如图2所示，然后向上滚动。文本不会重新定位到新位置，而是在较小的浏览器中重置回原始位置。如何让脚本在用户回滚时考虑新的浏览器大小

---

您需要调用

窗口上的函数。调整大小

您可以像这样调用函数：

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

这应该起作用：

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

---

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

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

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

---

问题是您的

top:

内联CSS属性粘附在

#nav_color

元素上，并且在调整大小时不会重新计算

试试这个（变量

top

定义仍然不完美..）：

---

嗯，由于某些原因，我不太明白（@user225219对不起，我没听懂你的话，我试了一下，但是：（.I用小提琴更新了OP.is，它按预期工作（在jquery进程中，侦听器在正确的位置执行代码）。问题出在它执行的代码中…我可能不完全理解您的问题，但您不能仅使用CSS

bottom

属性将div定位在底部吗抱歉，我一定没有正确解释这一点。导航在页面加载时定位在视口的底部，但是，当您向下滚动时，它将触到顶部然后“粘贴”在那里，并在滚动继续时修复自身。当您滚动回页面顶部时，它将“取消粘贴”自身并返回视口底部。这（）这就是它通常应该做的。但是当浏览器调整大小时问题就会出现。嗯。问题仍然会出现。当你将小提琴的“结果”部分放大，然后滚动到底部，然后滚动到顶部时，它不会将自身重新显示为新的浏览器大小。再次按run键查看它应该在哪里。

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

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);