CODEWITHSUNDEEP
javascriptjqueryhtml
DiscoveryOV
DiscoveryOV

Reputation: 1073

Show div after scrolling 100px from the top of the page

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");
  }
});

Upvotes: 16

Views: 60849

Answers (3)

Johnny
Johnny

Reputation: 31

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.

Upvotes: 3

Rory McCrossan
Rory McCrossan

Reputation: 337590

Try this:

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

Upvotes: 30

Chris Andersson
Chris Andersson

Reputation: 1301

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

  }
});

Upvotes: 13

Related Questions