javascript - 从页面顶部滚动 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");
  }
});

Answer 1

试试这个：

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

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

  }
});

Answer 3

我建议这样做：

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

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

没有这个：

$("#divname").hide()

它会显示然后执行淡出。这不是你想要的。