计算浏览器窗口上的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(); 
});