Question

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.

Answer 1

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