從頁面頂部滾動100px后顯示div

Question

我找到了這個，但是它在頁面底部之前完成了100px。 我需要從頁面頂部100px。 我知道如何實現它，我已經做了其他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()

它會顯示然后執行FadeOut。 這不是你想要的。