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

Question

我有一个固定在我的网页侧面的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());

我没有进行计算以将负值边距设置为高度的一半,但这并没有给出我正在寻找的高度值.有什么建议？？

Answer 1

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