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（或其中的一些元素）的高度，然后在函数中使用该值来隐藏它。我知道我可以使用某种形式的$（＆＃39;＃top-header）。但是我不确定如何将它合并到函数中。

谢谢， CJ

Answer 1

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

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

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

Answer 2

试试这个

$('document').ready(function(){    
   $(window).scroll(function(event){
     var scroll = $(window).scrollTop();
     var header = $("#top-header").height();

     if(scroll > header){
        header.hide(300);
     }else{
        header.show(300);
     }
   }
}

Answer 3

根据上面提供的答案，我能够调整原始代码，使其按预期工作。这就是我的所作所为：

<script type="text/javascript">

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

请记住，这是在默认加载jquery的joomla页面中。

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

3 个答案: