Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

How to create floating toolbars with HTML

Discover how to emulate the floating toolbars found on the FONTYOU site



Download plug-in

To start, download ScrollToFixed.js. Visit and click the ZIP button to obtain the whole repository as a .zip archive. Unpack this and identify the jquery-scrolltofixed.js file. Start and save a new, basic HTML document and place the plug-in in your page’s root directory and we’ll add the < script type=”text/javascript”>// < ![CDATA[ tags.

Script tags

Just before the closing body tag of the page, you need to first link to the main jQuery library. You can either point to a local copy of the jquery-1.91.js library or the version hosted by the global jQuery CDN. It won’t work otherwise and both methods are listed below:

001 < script type=”text/ javascript” src=”http:// 1.9.1.min.js”>< /script>
 002 < script type=”text/ javascript” src=”jquery- scrolltofixed.js”>< /script>

Bar building

Next add the basic page elements, notably the toolbar. Create a < div> with an id of ‘floatingbar’ and then add a CSS style class within the page head. Here we’ll set the height and width, make it’s position absolute and place it at the foot of the page.

001 < div id=”floatingbar”>< / div>
 002 CSS
 003 #floatingbar {
 004 background: #000;
 005 height: 57px;
 006 width: 100%;
 007 position: absolute;
 008 bottom: 0px; 
 009 }

Long page

It’s also important to set up a dummy page via a body CSS class. Set the page margin to zero and make sure the height is long enough to check the scrolling effect. We’ve made our dummy page FONTYOU red and used a similar Google font coloured grey simply for illustration purposes.

001 body {
 002 margin: 0;
 003 background: #ff3333;
 004 height: 3500px;
 005 font-family:’Arbutus Slab’, serif;
 006 color: rgb(191,191,191);
 007 }

Header logo

Place a new < div> in the page body with the id ‘toplogo’ and then inside it place an image link. We’ve used a dummy .png sized 84×84. Next, add a new CSS class #toplogo where you’ll set the position but also bear in mind that the z-index must be set over 1,000 to stay above the toolbar.

001 HTML
 002 < div id=”toplogo”>< a href=”#”>
 003 < /a>< /div> 
 004 CSS
 005 #toplogo
 006 {
 007 position: fixed;
 008 top: 0px;
 009 left: 50%;
 010 margin-left: -42px; /* 011 offset */
 012 z-index: 1001;
 013 } 

Call ScrollToFixed()

Finish up the whole process by adding the crucial code call below your opening < script type=”text/javascript”>// < ![CDATA[
// < ![CDATA[ tags and right before the closing body tag. By passing in your toolbar < div> id you’ll invoke the plug-in function and the element will float up from footer to header as you scroll, tucking under the logo. A really handy feature and looks great too.

001 < script type=”text/javascript”>
 002 $(‘#floatingbar’).
 003 scrollToFixed();
 004 < /script>< /body>
// ]]>< /script>