jquery - 在浏览器窗口调整大小时计算 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();
});