復位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 你可以打電話給你的功能，如：

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

Answer 2

這應該工作：

每次用戶調整窗口大小時，funcion fixDiv將被觸發

Answer 3

的問題是，您要保存關閉時頂部位置在頁面加載，但是當窗口大小是位置的變化。試試這個：

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

Answer 4

的問題是，你top:內嵌CSS屬性被粘到#nav_color元素不被重新計算，當你調整，

試試這個（可變top定義仍然不完美..）：

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

fiddle