Calculer la position Div sur la fenêtre de navigateur redimensionner

Question

lorsque je lance ma page Web, une animation est en cours d'exécution et positionné la navigation à une position spécifique. si je rends le navigateur plus petit, la position n'est plus correcte. seulement quand j'ai rechargé. vous pouvez faire vivre cela en quelque sorte?

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

Mettez votre code dans une fonction:

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

Et puis appelez simplement sur Redimensionner:

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

Gardez à l'esprit que vous aurez également l'appeler sur document.ready donc il fait l'animation lorsque vous exécutez la page.

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