添加一個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); 

腳本ca當用戶向下滾動時，使用底部的文本固定在html的頂部。現在問題來了。發射後，如果我調整瀏覽器的大小，請說出全屏，如圖二，然後向上滾動。文本不會重新定位到新位置，它會重置回到較小瀏覽器中的原始位置。當用戶滾動備份時，如何讓腳本考慮新的瀏覽器大小？

Answer 1

我認爲你可以做這樣的方式：的[重置CSS或腳本時布勞爾被調整（HTTP

fiddle

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