添加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;
}