Keep div always in viewport

Keep div always in viewport

Hallo

I have a Div with a search-form and I want to scroll it till it's on top of the viewport and then keep it there...

The HTML-code looks so:

  1. <body> <div id="header" style="height: 100px;"><img...></div> <div id="wrapper" style="margin: auto; width: 1000px; position: relative;"> <div id="cont" style="width: 800px;">bla blub foo</div> <div id="suche" style="position: absolute; top: 30px; left: 810px;">...</div> </div> </body>
That means when scrolling the div #suche should scroll up max. 100px and then stop.

  1. $(window).scroll(function() { $('#sucheProdID').css('top', ($(this).scrollTop() + 30) + "px"); });
With that code I can keep it on position but i have no idea how to allow 100px scrolling and keep it then on position...

Is there a way to find out the scrolling direction?