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

在Browserwindow上调整Div位置调整大小

1 个答案: