从页面顶部滚动100px后显示div [英] Show div after scrolling 100px from the top of the page

问题描述

我发现了这个，但是它在页面底部之前100px。我需要从页面顶部100px。我知道如何实现它，我已经完成了其他的jquery动画，而不是这个中需要的动画。

  $ （window）.scroll（function（）{
 if（$（window）.scrollTop（）+ 100> $（document）.height（） -  $（window）.height（））{
 
 alert（at bottom）; 
 
} 
}）; 
  

另外，我需要知道如何反转这个，以便当用户向后滚动时div消失之前100px。

这将用于导航栏。

Edit2>这也工作：

/ p>

  $（window）.scroll（function（）{
 if（$（window）.scrollTop（）> 100）{
 $（＃div）。fadeIn（slow）; 
} 
}）; （$（window）.scrollTop（）<100）{
 $（＃div）。fadeOut（fast（））
 $（window）.scroll（function（）{
 if ）; 
} 
}）; 
  

解决方案

试试这个：

  $（window）.scroll（function（）{
 if（$（window）.scrollTop（）> 100）{
 //> 100px from top  -  show div 
} 
 else {
 //< = 100px from top  -  hide div 
} 
}）; 
  

I found this, but this does it 100px before the bottom of the page. I need it 100px from the top of the page. I know how to implement it, I've done other jquery animations, just not what needs to be in this one.

$(window).scroll(function(){
  if($(window).scrollTop() + 100 > $(document).height() - $(window).height() ){

    alert("at bottom");

  }
});

And also, I need to know how to reverse this so the div disappears when the user scroll back up before the 100px.

This will be used for a navigation bar.

Edit2> This worked also:

$(window).scroll(function(){
  if($(window).scrollTop() > 100){
      $("#div").fadeIn("slow");
  }
});
$(window).scroll(function(){
  if($(window).scrollTop() < 100){
      $("#div").fadeOut("fast");
  }
});

解决方案

Try this:

$(window).scroll(function() {
    if ($(window).scrollTop() > 100) {
        // > 100px from top - show div
    }
    else {
        // <= 100px from top - hide div
    }
});

这篇关于从页面顶部滚动100px后显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！