16

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");
  }
});
DiscoveryOV
  • 1,045
  • 2
  • 9
  • 24

3 Answers3

30

Try this:

$(window).scroll(function() {
    if ($(window).scrollTop() > 100) {
        // > 100px from top - show div
    }
    else {
        // <= 100px from top - hide div
    }
});
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • I think I added some information since you answered this. I will try what you have given so far. Thanks! – DiscoveryOV Nov 02 '12 at 12:17
  • This works. After updating my post I took it into my own hands to solve it and came up with what's listed under Edit2> in my post. Thanks for the help! – DiscoveryOV Nov 02 '12 at 19:14
  • I went with yours anyway because realized it would work better. I was just showing the solution I had come up with originally. – DiscoveryOV Nov 03 '12 at 14:08
13

Try this:

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
  • 1,291
  • 11
  • 16
  • 3
    Why did this get a down vote? If it was because Rory posted the exact same answer you can see in the reference that he did do a change to his answer at 14:04, one hour after my answer. – Chris Andersson Jun 04 '13 at 13:39
3

I would recommend to do this:

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

Now the div is already hidden when you visit your page.

Without this:

$("#divname").hide()

It would show and then perform a FadeOut. And that is not what you want.

Johnny
  • 31
  • 3