Modifier dynamiquement la marge supérieure d'un div basé sur sa hauteur

Question

J'ai un div qui est fixé sur le côté de ma page Web. J'ai besoin que ce div soit centré verticalement. Facilement accompli en utilisant CSS: (note: la hauteur de base de la div est 300px;)

#sidePanel { margin: -150px 0 0 0; top: 50%; position: fixed;} 

La question que je vais avoir est ce SidePanel div détient ma navigation sur le site. Lorsque le nav s'ouvre pour montrer des éléments enfants, il augmente en hauteur ce qui désorganise le centrage. J'ai besoin de jQuery pour recalculer la hauteur du div sidePanel et appliquer la marge négative appropriée pour maintenir le div centré. Voici le jQuery que je jouais avec:

$("#sidePanel").css("margin-top", $(this).outerHeight()); 

Je n'ai pas travaillé sur le calcul de fixer la marge negaitve à la moitié de la hauteur, mais cela ne me donne pas la valeur de la hauteur que je suis à la recherche. Aucune suggestion??

Answer 1

this ne fait pas référence à l'élément #sidePanel dans ce cas, vous devez soit faire avec une fonction passée en .css() comme ceci:

$("#sidePanel").css("margin-top", function() { return $(this).outerHeight() }); 

ou un appel, comme .each() ceci:

$("#sidePanel").each(function() { 
    $(this).css("margin-top", $(this).outerHeight()); 
}); 

ou le cache du sélecteur, comme ceci:

var sp = $("#sidePanel"); 
sp.css("margin-top", sp.outerHeight()); 

Answer 2

Essayez de régler la marge à la hauteur de la fenêtre moins la hauteur div, tous divisés par deux. Cela devrait le centrer verticalement.