計算瀏覽器窗口上的Div位置調整大小

Question

當我運行我的網頁時，動畫正在運行並將導航定位到特定位置。如果我讓瀏覽器變小，那麼位置不再正確。只有當我重新加載。不知怎的，你可以做到這一點？

var viewportWidth = $(window).width(); 
var viewportHeight = $(window).height(); 
var contentHeight = $('#content').height(); 
var footerHeight = $('#footer').height(); 
var newSize = viewportHeight - footerHeight + 30; 
var $navigation = $('#navigation'); 
var $logo = $('#logo'); 
var $win = $(window).scroll(function() { 

    $navigation.animate({ 
     top: newSize 
    }, 1500, function() { 
     // $('#navigation .active').removeClass('active'); 
     // $('#navigation .current').addClass('active'); 
     $('#arrow').css('display', 'block'); 
     console.log('animation 1 finished'); 
    }); 
    )}; 

Answer 1

把你的代碼的函數：

function animatediv(){ 
var viewportWidth = $(window).width(); 
var viewportHeight = $(window).height(); 
var contentHeight = $('#content').height(); 
var footerHeight = $('#footer').height(); 
var newSize = viewportHeight - footerHeight + 30; 
var $navigation = $('#navigation'); 
var $logo = $('#logo'); 
$(window).scroll(function() { 

    $navigation.animate({ 
     top: newSize 
    }, 1500, function() { 
     // $('#navigation .active').removeClass('active'); 
     // $('#navigation .current').addClass('active'); 
     $('#arrow').css('display', 'block'); 
     console.log('animation 1 finished'); 
    }); 
    )}; 
} 

，然後簡單地調用它調整大小：

$(window).resize(function(){ 
animatediv(); 
}); 

請記住，您也必須調用它的document.ready所以它在運行頁面時執行動畫。

$(function(){ 
animatediv(); 
});