jquery - 如何获取元素的高度并在函数中使用它？

Question

我正在尝试使用 jquery 来确定元素的高度，然后确定用户是否滚动了该距离。应用程序是我有一个标题，后跟一个导航栏。当用户向下滚动页面时，标题将消失，导航栏将固定在屏幕顶部。我有这个工作使用以下代码:

    <script type="text/javascript">
jQuery(window).scroll(function () { 
if (jQuery(this).scrollTop() > 100 ) {
    jQuery("#top-header").hide(300);
} else {
    jQuery("#top-header").show(300);
}

});

但我想使用媒体查询根据屏幕尺寸更改#top-header 的高度，而不是保持不变。所以我想做的是确定#top-header(或其中的某个元素)的高度，然后在函数中使用该值来隐藏它。我知道我可以使用某种形式的 $('#top-header).height 但我不确定如何将它合并到函数中。

谢谢， 希杰

Answer 1

使用 jQuery height() 而不是预定义的高度元素函数。

var header = $("#top-header");

$(window).scroll(function() {
  if ($(this).scrollTop() > header.height()) {
    header.hide(300);
  } else {
    header.show(300);
  }
});