jquery - 根据其高度动态更改div的上边距

我的div固定在网页的一侧。我需要将该div垂直居中。使用CSS可以轻松完成：（注意：div的基本高度为300px；）

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

我遇到的问题是sidePanel div保存了我的网站导航。导航打开以显示子元素时，其高度会增加，从而使居中混乱。我需要一些jQuery重新计算sidePanel div的高度，并应用适当的负边距以使div居中。这是我正在使用的jQuery：

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

我尚未进行将负余量设置为高度一半的计算，但这并没有给我寻找的高度值。有什么建议么？？

最佳答案

在这种情况下，this并不引用#sidePanel元素，您需要使用传递给.css()的函数来使其成为这样：

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

或.each()调用，如下所示：

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

或缓存选择器，如下所示：

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