Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
12th June 2013

How to create floating toolbars

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

How to create floating toolbars
inspiration: http://shop.fontyou.com/

DOWNLOAD TUTORIAL FILES

Download plug-in

To start, download ScrollToFixed.js. Visit https://github.com/bigspotteddog/ScrollToFixed 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:// code.jquery.com/jquery- 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 84x84. 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>

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • Leigh Jeffery

      Sweet! thanks for this.

    • http://www.ladsrack.com/ Mens Underwear

      Wow great tutorial

    • Mitchell Finlay

      Did this on my own portfolio! Great Tutorial!