滚动页面距离顶部100px后显示div

Question

我找到了这段代码，但它在页面底部之前的100像素触发。我需要它距离页面顶部100像素触发。我知道如何实现，我已经做过其他的jQuery动画，只是不知道在这个里面需要什么。

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

    alert("at bottom");

  }
});

而且，我需要知道如何反转这种情况，使得当用户在滚动到100px之前向上滚动时，div消失。

这将用于导航栏。

Edit2> 这也有效：

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

- DiscoveryOV

Answer 1

试试这个：

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

- Rory McCrossan

---

我想自你回答以来我添加了一些信息。我会尝试你目前所提供的。谢谢！ - DiscoveryOV

这个可行。在更新了我的帖子后，我亲自解决了它，并想出了在我的帖子中列出的Edit2>。感谢您的帮助！ - DiscoveryOV

我还是选择了你的方案，因为意识到它会更好地运作。我只是展示了我最初想出的解决方案。 - DiscoveryOV

Answer 2

试一下这个：

var menu = $("nav");
$(window).scroll(function(){
  //more then or equals to
  if($(window).scrollTop() >= 100 ){
       menu.show();

  //less then 100px from top
  } else {
     menu.hide();

  }
});

- Chris Andersson

---

为什么这篇回答会被踩？如果是因为Rory发布了与参考资料中完全相同的答案，那么您可以看到他在14:04对答案进行了修改，也就是在我的回答发布一个小时后。 - Chris Andersson

Answer 3

我建议这样做：

我建议这样做：

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

现在，当你访问你的页面时，该div已经隐藏。

如果没有这样做：

$("#divname").hide()

它会显示，然后执行FadeOut。而这不是你想要的。

- Johnny