Home/ Questions/Q 6960183
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T15:22:09+00:00

I have a floating/static toolbar that I would like to delay until the visitor

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0