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

时间:2012-11-02 12:14:48

标签: javascript jquery html

我找到了这个,但是它在页面底部之前完成了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");
  }
});

3 个答案:

答案 0 :(得分:27)

试试这个:

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

答案 1 :(得分:10)

试试这个:

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

  }
});

答案 2 :(得分:3)

我建议这样做:

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

现在,当您访问页面时,div已被隐藏。

没有这个:

$("#divname").hide()

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