CODEWITHSUNDEEP
jqueryif-statementheight
Alex
Alex

Reputation: 7688

Show div after X% of body's height

How can I invoke a div, to show it on top (a search bar and some functions), after 300px of page's heigh have been scrolled?

What I'm trying to achieve is that when the user scrolls, at a certain point to show another div containing some tools.

Upvotes: 0

Views: 1747

Answers (2)

Curtis
Curtis

Reputation: 103358

Use .scroll() to fire an event, and use .scrollTop() to calculate the height scrolled from the top of the page.

Then depending on this value, show/hide the tools:

 $(document).scroll(function(){
        if (document.body.scrollTop>300){
            $(".tools").show();
       } else
       {
           $(".tools").hide();
       }
    });

-- View Demo --

Upvotes: 1

Minko Gechev
Minko Gechev

Reputation: 25682

Probably that's what you're looking for:

JavaScript

$(document).ready(function () {
  $('#my-div').hide();
});
$(document).scroll(function (e) {
    if (document.body.scrollTop >= 300) {
       $('#my-div').show(200);
    } else {
      $('#my-div').hide(200);
    }
});

CSS

#my-div {
  position: fixed;
  top: 10px;
  left: 10px;
  width: 300px;
}
body {
  height: 11100px;
}

HTML

<div id="my-div">
  Search: <input type="text" />
</div>

Demo: http://jsbin.com/welcome/49824

Upvotes: 1

Related Questions