Delay showing div

I have a floating/static toolbar that I would like to delay until the visitor has scrolled down the page some distance. I have tried using delay() and scroll() functions, but without success. It's possible I'm on the right trail, but incorrect syntax.

Say, for example, this is my toolbar (below)...what would I need in the script to delay showing it (javascript/jquery)? And, while we're at it, any way to fade it open?

<div class="toolbar">
<ul></ul>
</div>

Solution

The JQuery script below would reveal the toolbar div when the user scrolls the page.

NOTE: The page must be scrollable for the event to fire so the page content must be higher taller than the window.

<script>
  $(window).scroll(function () { 
    $(".toolbar").fadeIn("slow"); 
  });
</script>

This script would fade the toolbar div in after a pre-set delay.

<script>
  $(document).ready(function () { 
    $(".toolbar").delay(800).fadeIn(10000); 
  });
</script>

Place either of the scripts directly above the closing </body> tag of your page and ensure you have a link to the JQuery library in your <head> section