DWUser.com

Empowering Web Creativity

Back to Education Center Home:  Go Back        Font size:  Smaller  Larger         Font weight:  Lighter  Heavier 

Creating a Floating Navigation Menu

by Nathan Rohler

Floating Balloons

You've likely seen it while browsing the Internet – a navigation menu that "sticks" to the top of your window as you scroll down a page. This popular effect ensures that you never have to scroll back to the top of a page to navigate; the menu is always floating there, waiting to be used. In this tutorial, I'll show you how to create this effect.

A Demo

First, check out this demo of what we're going to create. Slowly scroll down the page, and notice how the navigation menu sticks to the top of your browser window, no matter how far you scroll. You can also play with source code; we'll be covering each part below, so you'll want to leave the code open and follow along.

How It Works

This effect is a combination of two different technologies. The first is the fixed CSS position property, which positions content relative to the browser window, regardless of the window's scrolling position. Here's a simple demo of fixed position (with source code). The Back to Education Center Home link in the bottom-right corner of this page uses fixed positioning, too. To make our menu "float," we'll be switching back and forth between fixed and static (the default for all elements in a page).

The second technology is some JavaScript, with jQuery to make things simpler. We use jQuery to determine the vertical position of a given element, then detect when the window is scrolled past that element's position. Here's a demo of that effect by itself (with source code).

Tip: If you're not familiar with JavaScript or jQuery, take a look at book #5 in our recent article, 7 Free eBooks that Should Line Every Web Professional's Digital Bookshelf. This crash course will get you up to speed in no time.

Creating Our Own

1. The HTML

First, we have a new HTML page with jQuery and a space for inline JavaScript and CSS. In the <body>, there are two parts – the important part, the header code, and then lipsum filler text to make the page scroll. I've highlighted in blue the CSS placeholder, the Javascript placeholder and the menu code:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Demo - Creating a Floating Navigation Menu</title>
  
  <!-- Include jQuery -->
  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
  
  <style type='text/css'>

    /* CSS will go here... */

  </style>
  


<script type='text/javascript'>
//<![CDATA[ 

  /* JavaScript code will go here */

//]]>  
</script>


</head>
<body>

<div id="wrap">
    
    <!-- The header code, including the menu -->
    <div id="header">
        <div id="logo">Start Slowly Scrolling Down<br /> This Page!</div>
        <div id="navWrap">
            <div id="nav">
                <ul>
                    <li><a href="#" class="smoothScroll">Demo Link 1</a></li>
                    <li><a href="#" class="smoothScroll">Demo Link 2</a></li>
                    <li><a href="#" class="smoothScroll">Demo Link 3</a></li>
                    <li><a href="#" class="smoothScroll">Demo Link 4</a></li>
                </ul>    
                <br class="clearLeft" />
            </div>
        </div>
    </div>
    
    <!-- The main page content (just filler for this demo) -->
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta justo in tellus porttitor non placerat dui pulvinar. Aliquam erat volutpat. Morbi ullamcorper libero sit amet tortor porta iaculis. Duis sit amet diam dolor. Mauris bibendum pharetra justo, sed ornare arcu scelerisque vitae. Integer molestie dignissim lacinia. Etiam sagittis consectetur iaculis. Pellentesque fringilla nulla at tortor dictum lobortis.
    </p>
    <p>
    Aliquam erat volutpat. Integer pulvinar dignissim lacus eu lacinia. Sed vitae orci eget nisl ultricies feugiat quis ut velit. Sed urna mauris, viverra volutpat pulvinar et, tempus vel odio. Aenean at posuere massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam quis augue nisi, quis ornare nisl. Nulla sagittis neque at massa venenatis tincidunt. Morbi sed nibh magna, vel consectetur nisi. Nullam tortor augue, scelerisque et consequat eu, fermentum at eros. Donec scelerisque ullamcorper tincidunt.
    </p>
    <p>
    Pellentesque ut nulla dolor. Sed non diam odio, ac luctus mauris. Nunc erat turpis, imperdiet vel laoreet laoreet, scelerisque vel dui. Sed nec nisl nulla, ut gravida neque. Mauris augue nibh, accumsan id viverra et, pellentesque a orci. Integer venenatis congue urna a ornare. Fusce in facilisis tortor. In lobortis est non lacus cursus venenatis. Donec a metus erat, id rhoncus turpis. Quisque vitae venenatis tellus. Donec quis risus erat, in luctus justo. Nulla ultrices, urna quis faucibus vehicula, lorem nibh tristique magna, nec tristique augue massa sit amet arcu. Donec malesuada, erat iaculis pretium ultricies, lorem nisl lacinia tellus, vel luctus augue nunc eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque dignissim, orci ut ultrices aliquet, enim nisl auctor magna, nec feugiat eros lorem vehicula ipsum.
    </p>
    <p>
    Maecenas vitae mauris enim, vel pretium turpis. Sed pharetra accumsan tellus. Maecenas pulvinar ipsum viverra sapien volutpat blandit. Vivamus vel massa velit. Pellentesque condimentum tincidunt aliquam. Vivamus mattis auctor diam, eu commodo massa laoreet ut. Sed congue faucibus arcu, quis hendrerit nisl pellentesque non. Nunc sagittis condimentum lacus. Cras tincidunt sem quis lorem tempor eget porta magna pulvinar. Donec molestie diam sagittis sem tristique in iaculis ligula aliquet. Aenean rutrum eleifend metus nec tempus. Integer nisi ligula, pretium in porta vel, euismod non lectus. Aliquam erat volutpat. Praesent sit amet massa purus.
    </p>
    <p>
    Ut pellentesque, lectus ut porttitor ullamcorper, velit nulla dignissim tellus, eu luctus nibh mauris non arcu. Mauris viverra purus et leo condimentum adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum facilisis lacus, quis rutrum purus tristique non. Nam vestibulum mauris eu sem porttitor accumsan. Phasellus at eleifend neque. Nam interdum ultrices commodo. Nunc dignissim aliquet dui. Nunc id nisl congue dolor pharetra pulvinar vel ac lectus. Nunc mi justo, semper id sollicitudin et, luctus eget quam. Ut condimentum porta consectetur. Donec nunc turpis, molestie ac semper ut, aliquet id nulla. Vestibulum id ipsum purus, sed tempor lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    </p>
    <p>
    Aliquam erat volutpat. Duis euismod porta eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque porta tincidunt gravida. Praesent sed mi nisl, non pretium mi. Suspendisse nibh orci, mollis eget adipiscing id, malesuada quis enim. Nullam facilisis elit ut magna facilisis ac eleifend diam tempor. Curabitur et justo est, a sagittis velit. Proin mollis, libero ac luctus faucibus, ipsum risus consequat dolor, viverra sagittis felis lorem non quam. Nam risus nisl, congue a semper eu, dapibus ac nunc. Maecenas tortor nisl, pellentesque eu luctus at, viverra ut libero. Nullam quis egestas massa. Donec dapibus rhoncus risus nec tincidunt. Suspendisse condimentum ante sit amet odio consequat id suscipit ante tempus. Aenean purus leo, blandit a iaculis non, tristique ullamcorper ante.
    </p>
    <p>
    Phasellus consectetur, ante nec pretium hendrerit, arcu nunc ullamcorper lectus, non pulvinar sapien nibh ac sem. Nullam dignissim erat sit amet sapien convallis ornare. In hac habitasse platea dictumst. Fusce et ante ut turpis condimentum dictum. Mauris elit justo, laoreet eget consectetur sed, suscipit ut augue. Phasellus id sollicitudin enim. Aenean et justo magna, in ultricies lectus. Nunc blandit quam rhoncus quam pretium tempor. Aenean nec fermentum nibh. Donec ornare magna nec leo tempus ac varius tortor hendrerit. Ut vel erat purus. Maecenas volutpat convallis est a sagittis.
    </p>
    <p>
    Duis mattis orci at justo molestie blandit. Nunc blandit tortor vitae ipsum congue ut pharetra nibh accumsan. Phasellus dapibus risus sed purus laoreet mattis. Ut placerat imperdiet diam, ut blandit dolor auctor vel. Nunc in odio quis eros fringilla consectetur. Ut porttitor imperdiet arcu nec ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis hendrerit felis id mauris pulvinar faucibus sodales magna dictum.
    </p>
    <p>
    Mauris in tincidunt ante. Donec fermentum varius interdum. Nulla consectetur faucibus purus, eu interdum nulla aliquet eu. Cras id lectus lacus, eleifend rhoncus lorem. Integer malesuada tristique lobortis. Phasellus a dolor non turpis euismod euismod vel a enim. Duis eu augue a elit commodo pellentesque. Ut dolor odio, ornare ac faucibus sed, tincidunt vel ipsum. Nunc et nibh eros, ut vehicula massa. Donec tempus, augue vel consequat adipiscing, nibh lacus mollis nunc, egestas commodo nisi quam sed orci.
    </p>
    <p>
    Maecenas sit amet tortor nunc. Donec nec tempor augue. Mauris mi dolor, dictum et dictum a, tincidunt sit amet sapien. Nunc dapibus nunc nec arcu tristique sit amet consectetur libero eleifend. Suspendisse dignissim massa eu neque lacinia tincidunt. Vivamus vel nisl eu nulla convallis pretium. Nunc ante justo, hendrerit a malesuada vitae, semper a risus. Nunc viverra purus quis lorem cursus quis ultrices mauris ullamcorper. Pellentesque luctus, nibh vel elementum facilisis, nisi turpis aliquet augue, et feugiat nisi massa sed risus. Aenean dui velit, molestie placerat euismod vel, sodales at mauris. Donec leo felis, eleifend nec placerat sed, placerat vulputate libero.
    </p>
    <p>
    Nullam in mauris eleifend lorem mollis facilisis dapibus vel felis. Morbi pharetra euismod semper. Vivamus mollis gravida imperdiet. Proin mattis, nulla sed lobortis tincidunt, mauris dui suscipit dolor, sed fermentum nisi orci eget neque. Ut mattis leo eu dolor fringilla eu auctor tortor blandit. Mauris eleifend risus nec felis elementum mattis. Nulla rhoncus ante quam, eu eleifend leo. Aliquam euismod felis in nunc suscipit congue. Sed facilisis sapien a erat posuere ac facilisis lectus cursus. Praesent nulla felis, placerat nec lacinia sit amet, laoreet eget odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent non urna mattis dui porttitor egestas at sed tellus. Integer id commodo quam. Nullam fermentum, velit nec sagittis placerat, magna nibh posuere dolor, vel dictum mi tortor et dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean iaculis, orci eu pulvinar pulvinar, tellus nisl luctus lectus, ac scelerisque leo purus non eros.
    </p>
    <p>
    Cras est sem, rutrum non malesuada ac, fringilla et risus. Mauris sit amet quam eget orci varius mattis quis eu augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam at ipsum eros. Pellentesque porta vestibulum mi, a pulvinar est condimentum scelerisque. Duis vitae metus a metus euismod tempor. Nunc augue mi, aliquam at commodo sed, condimentum a lorem. Proin rhoncus faucibus congue. Quisque diam ante, lacinia non fermentum at, dapibus nec lacus. Nunc suscipit vestibulum sem, a euismod mauris imperdiet et. Quisque gravida nulla sit amet magna posuere vel fringilla urna porta. Praesent rhoncus congue quam a gravida. Curabitur nisl erat, mattis non pharetra vel, tincidunt sit amet lorem. Donec tristique lacus luctus augue dapibus a semper eros suscipit.
    </p>
    <p>
    Fusce interdum tincidunt felis, id ullamcorper urna gravida ac. Ut ut mi quam. Vestibulum ultricies consequat porta. Donec orci felis, viverra non sodales a, gravida id enim. Duis vulputate lacus et nunc fermentum eu elementum erat pharetra. Aliquam et quam tortor, in ultrices eros. Integer elit ipsum, cursus at varius sed, molestie a tellus.
    </p>
    <p>
    Sed sagittis, eros nec ullamcorper commodo, urna lectus lobortis diam, eget hendrerit justo urna eu est. Duis vel lorem non diam luctus tincidunt. Vestibulum erat ipsum, tempus quis molestie ac, sodales et mi. Donec varius nisl mauris, ultricies iaculis leo. Fusce sapien magna, euismod ut vulputate quis, placerat et arcu. Vestibulum luctus turpis blandit quam venenatis hendrerit. Phasellus accumsan neque nec justo vestibulum congue. Nunc malesuada auctor nibh, nec interdum odio accumsan vel. Sed eu diam sed magna semper aliquam et sed erat. In hac habitasse platea dictumst. Nunc mi purus, vehicula at suscipit in, facilisis vel mauris. Praesent blandit odio vitae ante sagittis pellentesque. Suspendisse cursus, eros sagittis ultricies tempor, odio neque vulputate sem, vel commodo tellus nisl vitae erat. Nunc pretium arcu varius urna lacinia tempus. Proin condimentum sagittis gravida. Nam ipsum neque, auctor vel condimentum id, auctor eu nisi.
    </p>
    <p>
    Phasellus venenatis orci eleifend felis blandit mollis. Nullam volutpat faucibus augue. Donec rhoncus imperdiet dignissim. Proin at orci semper sem mollis congue. Integer nec mi mi. Vivamus lobortis lacus nibh. Morbi ultricies venenatis metus, eget fermentum eros mollis ut. Suspendisse turpis mi, tincidunt sed consectetur ut, malesuada ac orci. Curabitur a nibh est, a posuere libero. Nulla convallis commodo lectus ac bibendum. Nam cursus, nisi sed pharetra congue, est erat blandit justo, sed suscipit odio leo sit amet leo.
    </p>
    <p>
    Pellentesque commodo, quam vel porttitor congue, nisi ante pellentesque diam, id posuere elit eros ut orci. Nunc dictum orci a justo egestas convallis. Donec eget suscipit risus. Sed varius, ipsum non dapibus porttitor, risus risus pretium mauris, et auctor tellus turpis at sem. Morbi gravida, enim vitae rhoncus mollis, elit tortor egestas mauris, eu viverra libero nisl vel enim. Praesent lectus lorem, convallis quis sagittis vitae, auctor id erat. Donec feugiat, tellus non commodo tempus, massa libero faucibus erat, et imperdiet erat lorem ut odio. Ut eu urna at ante euismod viverra eu tempus dui. Fusce at nulla sit amet diam blandit facilisis ut ut nisi. Morbi rutrum tincidunt placerat. Sed fringilla fermentum leo, consectetur vestibulum felis condimentum sit amet. Cras et odio augue. Cras tincidunt nulla quis dolor aliquam adipiscing. Fusce a ligula eget velit egestas varius. Vivamus sit amet ipsum sed velit fringilla lacinia ut non quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    </p>
    <p>
    Pellentesque eget nisi odio. Sed faucibus gravida massa vel eleifend. Fusce sed est eleifend tellus tincidunt elementum nec eu ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam imperdiet malesuada lorem, ac blandit est tincidunt at. Vestibulum malesuada velit et dolor sodales id dapibus ante convallis. Phasellus dui velit, scelerisque nec sagittis sit amet, volutpat vitae purus. Curabitur risus neque, laoreet ac ornare ut, pellentesque eget quam. In ac dolor at erat condimentum volutpat in ac nisl. Sed orci turpis, rutrum at varius non, viverra eget ante. Aliquam consectetur arcu id dolor viverra ultrices. Proin pellentesque, tortor porta molestie vestibulum, massa magna ornare velit, vel adipiscing eros erat at lacus. Maecenas est mi, tincidunt a pretium vel, fermentum congue erat. Sed in diam odio.
    </p>
    <p>
    Integer at lorem ante, in vestibulum nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce nibh leo, viverra nec semper eget, sollicitudin id metus. Nulla facilisi. Fusce nec nunc mi. Aliquam ligula odio, imperdiet sed blandit vitae, faucibus eu dolor. Fusce eu nibh eros. In blandit tempus accumsan. Ut scelerisque mattis eleifend.
    </p>
    <p>
    Etiam euismod ullamcorper sem, vitae varius ante faucibus nec. Phasellus porta nunc ut erat venenatis vel mattis sapien facilisis. Ut placerat eleifend luctus. Sed condimentum enim eu risus adipiscing facilisis. Proin facilisis, ligula ac suscipit dapibus, lacus dolor luctus ante, id eleifend nulla felis in nulla. Nam arcu nibh, cursus et tincidunt non, vulputate nec massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce eu lacinia dolor. Vestibulum eget tortor nisi, quis sodales urna.
    </p>
    <p>
    Curabitur eget urna neque, et semper ipsum. Aenean rutrum dictum risus. Nulla in dolor odio, sed dapibus turpis. Nunc fermentum adipiscing est, eget dapibus odio tempus at. Nam ultrices enim et lectus vulputate dictum. Sed id dignissim lorem. Fusce rutrum leo non nunc ultrices posuere eu eu magna. Suspendisse ultricies ornare congue. Pellentesque sit amet tellus at ante auctor rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet est erat. Phasellus vestibulum libero id leo posuere vulputate. Etiam pulvinar mattis tellus id imperdiet.
    </p>
    <p>
    Nullam eleifend molestie pharetra. Duis tempor luctus rhoncus. Suspendisse potenti. Morbi quis mi quam, ac pretium nulla. Pellentesque at lacus diam, quis vestibulum turpis. Etiam euismod sapien vel nulla aliquam a suscipit eros vulputate. Vivamus rutrum massa sit amet justo accumsan dignissim. Nam lobortis, augue eget molestie laoreet, leo libero pellentesque sapien, eu interdum erat elit vel nunc. Sed porta diam convallis augue rhoncus ac laoreet risus facilisis. Morbi mattis vehicula urna, ut venenatis eros viverra vitae. Aliquam magna nulla, congue sit amet aliquam sed, interdum in est. In molestie dui sit amet ipsum consequat cursus. Praesent tellus ante, elementum in ornare sed, ultricies vitae quam. Morbi id dolor id urna lacinia iaculis quis non nisl.
    </p>
    <p>
    Aenean laoreet venenatis sem, sit amet aliquet arcu commodo eu. Sed pharetra dui sit amet felis tincidunt egestas mollis est tincidunt. Etiam sit amet neque non mauris volutpat rutrum non a tellus. Nulla facilisi. Cras tellus mauris, sollicitudin vel tempor at, convallis sit amet dolor. In hac habitasse platea dictumst. Curabitur sapien mauris, cursus quis placerat sit amet, euismod vitae ipsum. Donec orci metus, feugiat non blandit sed, ullamcorper sit amet lectus. In hac habitasse platea dictumst. Mauris id sem risus, a pharetra orci.
    </p>
    <p>
    Fusce posuere nisl eu purus cursus pretium. Nullam vel dui nec enim blandit aliquam nec non purus. Sed sed mi tellus, id eleifend metus. Proin lacus lectus, ultricies id bibendum ac, scelerisque congue dolor. Curabitur sed arcu et ipsum congue commodo. Maecenas porttitor ante ut nulla consectetur et facilisis sapien semper. Ut tempus orci eu nisi venenatis ut fermentum nisl condimentum. Sed facilisis viverra ligula, a viverra ante ultricies ut. Sed pellentesque elementum dui et dictum. Donec pretium lacinia sem. Maecenas sit amet velit ante, eleifend elementum turpis. Etiam quis nulla erat. Donec in enim libero.
    </p>
    <p>
    Duis pulvinar eros eu turpis vehicula blandit. Aenean nunc ligula, condimentum a viverra et, tincidunt at orci. Nam vel sem id mi laoreet dapibus nec et nisl. Phasellus fermentum tellus quis purus adipiscing placerat. Integer vel erat sed nulla pellentesque aliquam. Donec vestibulum sollicitudin rhoncus. Nulla sit amet vehicula justo. Integer egestas nibh at lorem bibendum in euismod dui luctus.
    </p>
    <p>
    Curabitur interdum vehicula orci, non volutpat mauris sollicitudin in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus eget diam lorem. Ut et nisi diam. Aliquam eu tortor in mauris viverra sagittis a id magna. Nunc non erat dolor. Nullam vehicula lacinia purus sit amet faucibus. Mauris accumsan pellentesque neque in porttitor. Sed posuere neque non ipsum placerat laoreet. Nunc a odio eros, ac molestie dolor. Praesent non odio augue, scelerisque ultricies nisi. Sed congue felis vel ipsum pretium sodales. Mauris ac fringilla sapien. Proin aliquam nisl a lorem feugiat id suscipit enim lobortis. Sed dapibus aliquet felis, eget rutrum arcu bibendum et. Praesent et vulputate dolor.
    </p>
    <p>
    Aenean porta risus nec enim euismod pellentesque. Vestibulum suscipit risus commodo orci fringilla molestie. Sed eleifend vulputate diam, vel suscipit metus iaculis at. In mattis venenatis magna, ac sodales enim gravida in. Ut sollicitudin blandit auctor. Aliquam sit amet enim enim. Cras pellentesque odio ultrices ipsum porta porta.
    </p>
    <p>
    Pellentesque et massa arcu, feugiat placerat enim. Cras nibh sem, dignissim at congue vitae, porta eu arcu. Nam sit amet sapien libero, at varius felis. Curabitur tincidunt accumsan mattis. Phasellus fringilla rhoncus lacinia. Suspendisse ornare bibendum mauris, quis porta metus ullamcorper sit amet. Proin pellentesque nunc eu eros blandit malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam orci augue, ultricies id congue nec, interdum eget erat. Proin at lacus sed nunc cursus rutrum id nec enim. Donec molestie ligula in sem viverra a suscipit mauris interdum. Sed nec nibh mauris, eu eleifend enim. Pellentesque consequat, lacus non tempor pretium, arcu velit consequat nisl, aliquet hendrerit massa erat non est. Morbi feugiat mauris eget ipsum adipiscing rutrum.
    </p>
    <p>
    Sed nec placerat diam. Fusce gravida cursus dolor, sit amet volutpat turpis egestas condimentum. Praesent a bibendum orci. Curabitur sollicitudin enim nec dolor laoreet vulputate. Ut quis cursus dui. Maecenas eu interdum risus. Ut ac ligula at tortor mattis eleifend. Morbi fringilla nulla ut augue ornare scelerisque quis quis risus. Etiam faucibus interdum odio et imperdiet. Mauris tortor justo, ullamcorper vitae aliquet vitae, fermentum feugiat orci. Suspendisse ligula nibh, accumsan eu lacinia eleifend, tempus ac sem. Nunc erat neque, rutrum id porttitor a, ullamcorper et metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse gravida ligula enim.
    </p>
    <p>
    Maecenas luctus tincidunt lorem sed posuere. Sed eu nisl libero, at interdum velit. Proin porta suscipit lectus et rhoncus. Vivamus et augue eu lectus tincidunt feugiat. Phasellus dictum iaculis arcu vel convallis. Phasellus rutrum commodo nulla ut pretium. Fusce elementum urna a sem facilisis aliquam. Maecenas condimentum elit tincidunt felis adipiscing a dapibus ipsum pellentesque. Fusce vitae mauris ut elit tempus malesuada. Sed diam purus, consectetur at tincidunt vel, dictum sed enim. Nulla facilisi. Aliquam erat volutpat. Praesent metus nibh, volutpat et semper non, tincidunt non felis. Nunc posuere lorem quis dolor interdum ornare. Sed quis est vel leo semper dictum ut ut est.
    </p>
    <p>
    Sed tincidunt dui luctus ligula tincidunt vehicula. Sed id enim in urna aliquam congue sit amet viverra turpis. Proin laoreet turpis vitae tellus ornare eu suscipit urna laoreet. Ut vel nulla ut elit dignissim dignissim sodales at tortor. Pellentesque tellus orci, porttitor in fermentum eget, faucibus in metus. Morbi arcu magna, sagittis ac feugiat a, iaculis eu neque. Nam gravida ultrices ullamcorper. Morbi arcu mauris, suscipit eget ultricies vel, convallis sed odio. Maecenas gravida est quis tellus molestie sodales. Mauris quam risus, interdum ac fringilla ac, commodo eget dolor. Donec elementum commodo libero non feugiat. Donec suscipit velit at massa laoreet ultricies. Curabitur vel nisl tellus. Sed sagittis aliquam porttitor.
    </p>
    <p>
    Curabitur sed erat consectetur libero iaculis ullamcorper. Curabitur gravida dignissim dui at semper. Ut eleifend erat non quam viverra porta. Fusce vitae feugiat dolor. Morbi condimentum leo enim. Mauris ac urna non felis aliquet rhoncus in sit amet diam. Proin ut est mauris, eget dictum nibh. Mauris posuere congue accumsan. Aliquam erat volutpat. Integer elementum ullamcorper mauris porttitor tempus. Curabitur eu sem in dolor luctus elementum. Vestibulum consectetur ullamcorper quam, vel laoreet orci euismod nec. Nullam arcu sapien, dapibus eget fermentum vitae, dictum eget justo.
    </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a quam at purus scelerisque vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed justo leo, egestas in bibendum sit amet, dictum nec purus. Morbi et elit eu justo tristique scelerisque at sed ligula. Integer sit amet risus eu sapien pellentesque consequat. Vestibulum varius nisl eu lectus auctor laoreet laoreet nisi dignissim. Nullam facilisis, nisi vitae condimentum faucibus, orci erat luctus arcu, accumsan dignissim turpis orci a libero. Praesent pharetra purus at risus iaculis lacinia.
    </p>
    <p>
    Nullam tristique justo ut eros placerat aliquet. Nulla eu dolor at sem porta feugiat nec posuere leo. Suspendisse at risus vitae quam rhoncus lobortis. In quis sagittis ante. Donec laoreet, felis ac molestie vestibulum, arcu felis tempor risus, eu suscipit enim odio rutrum enim. Fusce sit amet libero tortor, eu ullamcorper nibh. Cras mi neque, dictum sit amet dictum nec, commodo nec arcu. Morbi nibh metus, vulputate sed euismod ut, ornare non tellus.
    </p>
    <p>
    Duis in magna quis tortor ultricies porttitor non a nibh. Maecenas varius placerat scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut hendrerit varius ipsum vitae scelerisque. Maecenas est dolor, cursus lobortis rhoncus id, dapibus sit amet neque. Mauris mauris turpis, pretium ac venenatis sed, convallis et sem. Quisque commodo eleifend massa, eu laoreet risus congue sed. Donec faucibus dignissim sem, vitae semper purus tempor eget. Aenean ultrices lorem congue leo fringilla pretium. Donec rhoncus velit vitae orci convallis iaculis. Ut sit amet erat mi. Aenean aliquet suscipit varius.
    </p>
    <p>
    Aliquam facilisis aliquam felis eu dictum. Pellentesque varius euismod nisi ut interdum. Integer est velit, fringilla ac facilisis non, faucibus quis elit. Vivamus eget facilisis nisi. Mauris velit magna, pulvinar ut sollicitudin vitae, volutpat vel metus. Aliquam erat volutpat. Aliquam tristique dictum eros, eget pulvinar libero feugiat eu. Pellentesque tempus ligula ut nibh posuere cursus. Cras tortor ante, volutpat id semper in, volutpat sit amet erat.
    </p>
    <p>
    Integer scelerisque porttitor congue. Nulla turpis odio, mollis sed elementum accumsan, vulputate pharetra nisi. Vivamus sed enim dui. Vivamus hendrerit viverra dui non tincidunt. Sed ultrices metus in quam pellentesque pulvinar. Vestibulum interdum gravida arcu sed accumsan. Morbi enim libero, semper non auctor nec, aliquet at odio.
    </p>
    <p>
    Proin sodales venenatis elit. Etiam non est sed nunc tincidunt vestibulum. Vestibulum pulvinar dui in dui scelerisque auctor eu quis lacus. Aliquam erat volutpat. Nunc felis est, dictum eget porta nec, varius eu erat. Quisque et neque ipsum. Phasellus mollis felis sit amet diam elementum egestas rutrum justo adipiscing. Nullam felis felis, luctus quis tempus ut, elementum sed velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris massa arcu, placerat vel porttitor eget, venenatis at magna. Integer consequat commodo interdum. Integer laoreet est in justo interdum eu scelerisque sapien cursus. Nunc sed rutrum risus. Phasellus tellus lorem, elementum vitae commodo vitae, dapibus eu sem.
    </p>
    <p>
    Phasellus quis augue risus, sit amet feugiat quam. Cras nec mi sed arcu imperdiet tempus a in libero. Pellentesque elit est, placerat nec cursus ac, faucibus eget ante. Maecenas ipsum magna, tincidunt ac blandit vitae, varius id mauris. Maecenas euismod, urna quis dictum sodales, diam purus auctor justo, non faucibus nulla nisl vel lectus. Mauris in leo eu ipsum faucibus pharetra id porta elit. Praesent pretium mollis arcu, at vestibulum ligula tincidunt id. Praesent non augue sapien. Sed accumsan, enim lobortis viverra egestas, diam libero vehicula nisi, ut rutrum est augue at est. Pellentesque eget ligula non sapien facilisis condimentum. Maecenas vel adipiscing risus. Sed vestibulum tincidunt tellus eget mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla tempor lacus eget risus porttitor eu pharetra odio mattis. Donec nisl tellus, blandit vitae pulvinar sit amet, ultrices eget eros.
    </p>
    <p>
    Vivamus tincidunt porttitor urna, ac condimentum sapien egestas a. Integer a est nibh. Duis lacinia rhoncus purus vel pulvinar. Aliquam erat volutpat. Vivamus sapien lorem, gravida quis eleifend et, bibendum a quam. In vel mi sed leo consectetur fringilla. Vivamus quis gravida risus. Sed condimentum sem eu massa posuere volutpat. Praesent nec sagittis elit. Nullam dapibus vehicula mollis. Cras hendrerit dui et elit vulputate semper.
    </p>
    <p>
    Nunc eu diam mauris. Maecenas at congue tellus. In eget turpis eget massa iaculis ornare vitae vel ligula. Mauris congue enim non felis dapibus non aliquam erat bibendum. Nullam id velit mauris, ac suscipit quam. Phasellus ornare malesuada risus a lacinia. In elit augue, pharetra vitae vehicula id, varius a nisi. Nulla auctor condimentum semper. Aliquam erat volutpat. Proin sed risus nec odio tincidunt faucibus. Nunc aliquam lectus venenatis enim condimentum vulputate. Quisque nulla dolor, vulputate id egestas eget, posuere quis turpis. Cras vitae neque ac risus ornare dapibus. Curabitur ac nisl nulla. Sed semper massa nisl. Ut semper, sem vel mattis laoreet, mi tellus rutrum erat, sed adipiscing metus odio non magna.
    </p>
    <p>
    Nulla egestas tempor nisl, in aliquam nunc vulputate et. Morbi dui magna, adipiscing vitae semper id, volutpat non diam. Donec sed mauris elit. Ut auctor rhoncus nisi eu vestibulum. Maecenas vestibulum ultricies justo non euismod. Phasellus vitae lorem vitae nunc consectetur gravida. Cras gravida luctus mauris eget pharetra. Curabitur ante risus, feugiat vel sodales non, volutpat ut purus. Sed ac tortor turpis. Ut mollis libero in nisi placerat sed interdum libero iaculis. Sed risus mi, sollicitudin nec sodales non, ultricies et nulla. In sit amet risus turpis, nec consequat lacus. Sed tempus magna et mi mattis nec iaculis eros feugiat. Suspendisse ut interdum elit.
    </p>
    <p>
    Aliquam dui mauris, varius et bibendum sed, posuere nec felis. Morbi diam dui, porttitor eget pulvinar et, vulputate a sem. Vestibulum viverra porta molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum, quam vel lobortis congue, dolor lectus porta arcu, vel eleifend metus est sit amet nisi. Aliquam erat volutpat. Suspendisse volutpat, erat vitae vulputate tempor, nulla leo mattis tellus, eget mattis mauris urna id quam. Sed nec aliquet tortor. In lobortis euismod lacus quis pretium. Sed dignissim rhoncus imperdiet. Phasellus nisi quam, suscipit sit amet rutrum quis, facilisis ut justo. Donec bibendum, metus eu commodo volutpat, ipsum nisi iaculis orci, sagittis aliquam sem odio et nisl. Donec a orci lacus, vitae interdum arcu. Nam id leo luctus nisi pharetra lobortis. Vestibulum sit amet feugiat velit.
    </p>
    <p>
    Aliquam erat volutpat. Nullam ullamcorper scelerisque risus, quis feugiat est suscipit vitae. Fusce sit amet nisi non velit rutrum volutpat viverra vel nibh. Pellentesque sit amet nisl vitae nunc tincidunt eleifend vel vitae nisl. Nulla id odio at libero varius condimentum eget feugiat tellus. Morbi sodales velit fermentum nulla molestie tempor. Quisque semper tortor nec massa ultricies at auctor lectus euismod. Aliquam dignissim sem eget elit tristique sit amet eleifend mi sodales. Vivamus tincidunt hendrerit felis eget aliquam. Etiam porta adipiscing tellus in elementum. Vivamus tristique diam nec justo faucibus consequat. Sed cursus cursus velit, in consectetur arcu mattis a. Nullam non dui eros, non iaculis ante. Proin viverra, lorem id tempor interdum, magna ligula auctor leo, id euismod neque metus quis arcu. Quisque eu ante sapien, quis dictum velit.
    </p>
    <p>
    Aliquam a tincidunt urna. Donec tellus neque, molestie in dapibus nec, rutrum id lectus. Ut a orci in libero tincidunt placerat. Aliquam auctor accumsan facilisis. Maecenas ut ipsum nibh. Morbi suscipit, turpis eu ornare consequat, turpis lorem molestie erat, a faucibus elit tortor at orci. Integer congue nibh non mauris tempus pretium. Nulla vestibulum diam nec nisl sagittis consectetur. Aenean sed libero nec est ultrices bibendum. Duis accumsan libero a risus egestas egestas.
    </p>
    <p>
    Ut id dictum turpis. Proin cursus laoreet posuere. Nullam porta vulputate lacus ut semper. Suspendisse mollis mi eget risus congue scelerisque. In purus massa, bibendum a venenatis vitae, egestas et lorem. Fusce molestie, elit a aliquam vestibulum, mauris orci faucibus odio, in cursus nunc tellus ac sapien. Ut quis mattis turpis. Proin a laoreet est. Praesent sed interdum mi. In ac odio ut lectus elementum fringilla at vitae nisl. Vestibulum facilisis consequat tellus, in interdum lectus sodales non. Praesent eu ipsum enim. Nunc lacinia rutrum justo et venenatis.
    </p>
    <p>
    Ut tempus accumsan tortor congue molestie. Pellentesque lobortis mauris dignissim urna scelerisque ornare. Suspendisse potenti. Sed viverra adipiscing leo eu laoreet. Duis venenatis, justo et tincidunt consequat, odio dui vulputate augue, id faucibus ligula justo vitae mauris. Nunc vitae nisl tellus, id cursus turpis. Aliquam at magna quam. Sed massa erat, egestas a malesuada eget, imperdiet nec ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean sit amet libero vitae nibh fringilla dignissim. Vestibulum rhoncus velit in ligula pharetra id semper magna malesuada. Morbi ultrices sodales scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis a eros vel lorem eleifend faucibus. Maecenas pharetra vulputate pretium.
    </p>
    <p>
    Nulla facilisis orci vel ante posuere vitae porttitor nisl consectetur. Sed in risus neque, non vestibulum enim. Nunc tortor diam, volutpat id sodales sit amet, mattis in lorem. Suspendisse commodo lacus vitae nisi placerat pretium vel non velit. Mauris vestibulum aliquam nunc ut pretium. Sed vel purus a nunc rutrum eleifend. In sodales tempor mattis.
    </p>
    <p>
    Phasellus tristique sapien eu est condimentum molestie. Mauris nec risus tristique sapien venenatis mollis et at massa. Sed faucibus, erat eu tincidunt rutrum, augue mi adipiscing nulla, a imperdiet lacus massa consequat tortor. Quisque in ante eros, vel mattis risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque bibendum, sem eu semper imperdiet, mauris urna rutrum ligula, sit amet porta augue eros vitae metus. Duis eu nibh ut nisl convallis auctor nec a nibh. Vivamus elementum turpis ut velit scelerisque sed luctus lacus laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean tempus vestibulum mauris eu dictum. Suspendisse tempus sollicitudin ante vel cursus. Proin posuere nunc quis est ornare euismod egestas purus vestibulum. Aenean viverra volutpat velit, ut placerat libero rutrum ullamcorper. Duis nisi metus, aliquet venenatis scelerisque a, lacinia sed ante.
    </p>
    <p>
    Integer ac laoreet ligula. Fusce varius dictum consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam enim augue, mollis non mattis facilisis, eleifend sed quam. Nunc metus leo, congue vitae vehicula sed, eleifend ac justo. Etiam rhoncus sem non justo dignissim quis rutrum mi auctor. Proin volutpat tempor interdum. Sed ut ultrices tortor. Praesent ultricies malesuada velit. Nam blandit, elit ut feugiat vehicula, lacus quam feugiat lacus, at pellentesque augue turpis in urna. Morbi scelerisque nunc ac turpis euismod at pharetra lorem congue. Aenean ornare ipsum at dolor commodo sollicitudin sollicitudin massa ullamcorper. Integer tempus iaculis leo, vitae condimentum lacus ornare a. Maecenas fringilla pellentesque odio, eu suscipit enim luctus ac.
    </p>
    <p>
    Nullam justo nisl, vulputate id interdum ut, lacinia a metus. Nam tincidunt pulvinar feugiat. In aliquam tempor erat, nec posuere augue tincidunt faucibus. Nullam vel scelerisque mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis nec felis neque. Integer vel consequat libero. Vivamus in odio nec odio congue interdum. Nulla facilisi.
    </p>
</div>
  
</body>
</html>

Let's Break Down the Header HTML

To review, here's the header HTML code:

   <div id="header">
        <div id="logo">Start Slowly Scrolling Down<br /> This Page!</div>
        <div id="navWrap">
            <div id="nav">
                <ul>
                    <li><a href="#" class="smoothScroll">Demo Link 1</a></li>
                    <li><a href="#" class="smoothScroll">Demo Link 2</a></li>
                    <li><a href="#" class="smoothScroll">Demo Link 3</a></li>
                    <li><a href="#" class="smoothScroll">Demo Link 4</a></li>
                </ul>    
                <br class="clearLeft" />
            </div>
        </div>
    </div>

First, we have a place for the logo. Then, we have the main navigation menu. We wrap it in a div, #navWrap, which will have a set height applied to it; this will ensure that when we "pop" the menu out and start floating it over the page, the menu holder won't collapse. Without this, the main page content would shift when the menu starts floating. That would defeat our main goal of a seamless transition from inline to floating.

Within the #nav div, we define the actual content that floats at the top of the page. This can hold any content you want – a menu, social sharing buttons, a logo, or anything else. For our demo, we use a simple navigation menu.

2. The CSS

If you preview your page right now, it's pretty bland. So let's add some CSS to spiff things up. Replace the /* CSS code will go here... */ placeholder with the following code:

body {
background-color: #333;  
   color: #999;
   font: 12px/1.4em Arial,sans-serif;
}
#wrap {
   margin: 10px auto;        
   background: #666;
   padding: 10px;
   width: 700px;
}
#header {
   background-color: #666;
   color: #FFF;
}
#logo {
   font-size: 30px;  
line-height: 40px;    
   padding: 5px;
}
#navWrap {
   height: 30px;
}
#nav {
padding: 5px;
background: #999;    
}
#nav ul {
   margin: 0;
padding: 0;    
}
#nav li {
   float: left;
   padding: 3px 8px;
   background-color: #FFF;
   margin: 0 10px 0 0;
   color: #F00;
   list-style-type: none;
}
#nav li a {
  color: #F00;  
text-decoration: none;    
}
#nav li a:hover {
   text-decoration: underline;   
}
br.clearLeft {
   clear: left;        
}​

Most of this CSS is simple styling code that adds some color and typography and lays out the menu bar. One noteworthy definition is the #navWrap selector:

#navWrap {
   height: 30px;
}

As I explained above, we're applying an explicit height to the navigation area to prevent it from collapsing when, later on, we remove the menu from the layout flow via position: fixed.

Step 3: The JavaScript

If you preview the page again, you should see a much better-looking page – but it still doesn't work. We need to add the JavaScript code to tie everything together. Replace the /* JavaScript code will go here */ placeholder with the following code:

$(function() {
    // Stick the #nav to the top of the window
    var nav = $('#nav');
    var navHomeY = nav.offset().top;
    var isFixed = false;
    var $w = $(window);
    $w.scroll(function() {
        var scrollTop = $w.scrollTop();
        var shouldBeFixed = scrollTop > navHomeY;
        if (shouldBeFixed && !isFixed) {
            nav.css({
                position: 'fixed',
                top: 0,
                left: nav.offset().left,
                width: nav.width()
            });
            isFixed = true;
        }
        else if (!shouldBeFixed && isFixed)
        {
            nav.css({
                position: 'static'
            });
            isFixed = false;
        }
    });
});

The code is rather short, but there's a lot packed in there. Let's break it down.

First, we wrap everything in a document.ready handler via $(function(){ ...code to run... }); . This code will be run as soon as the page is ready for manipulation.

Next, we do some setup. We create a reference to the menu since we'll need to reference it repeatedly:

var nav = $('#nav');

This helps to improve performance by avoiding repeated lookups of the element. Then, we use the offset method to get the menu's position relative to the overall window. This method returns an object with .top and .left properties. Since we're interested in vertical position, we store the vertical offset as navHomeY. We'll use this value to determine when the window has been scrolled past the natural top of the menu.

Next, we create a flag called isFixed to track whether or not the menu is currently floating; this is used to ensure that we only modify the positioning of #nav when it's actually needed.

The Scrolling Handler

Now, we create a jQuery reference to the window named $w. We use this to apply a scroll event listener that will be triggered whenever the page is scrolled. Again, here's the handler code that is executed whenever the window is scrolled:

        var scrollTop = $w.scrollTop();
        var shouldBeFixed = scrollTop > navHomeY;
        if (shouldBeFixed && !isFixed) {
            nav.css({
                position: 'fixed',
                top: 0,
                left: nav.offset().left,
                width: nav.width()
            });
            isFixed = true;
        }
        else if (!shouldBeFixed && isFixed)
        {
            nav.css({
                position: 'static'
            });
            isFixed = false;
        }

First, we get the current vertical scrolling position by using the scrollTop method on the window. Then, we check this value against the menu's home position, to determine if the menu should be floating. Taking our two boolean values, shouldBeFixed and isFixed, we take action if the current state doesn't match the needed state. If the menu should be fixed and it isn't, here's what we do:

            nav.css({
                position: 'fixed',
                top: 0,
                left: nav.offset().left,
                width: nav.width()
            });
            isFixed = true;

We update the menu's CSS, applying the uber-important position: fixed and setting top: 0 so that the menu will stick to the top of the window. Additionally, we update the horizontal position (via left) to match the exact horizontal position where it was. This ensures that the menu doesn't jump horizontally when we start floating it. Likewise, we explicity set the width. This is because inline block elements such as div automatically fill the full available width when they are positioned within the page's layout flow. However, when they have position: fixed or position: absolute applied, they only expand horizontally to fit their content. Thus, we have to explicitly set width to ensure that the width doesn't suddenly change. Finally, we update the isFixed flag to record the menu's new state.

In the second branch, we check for the opposite situation. If the menu shouldn't by floating and it is, we disable position: fixed by resetting position to the default value, static:

            nav.css({
                position: 'static'
            });
            isFixed = false;
As before, we also update the isFixed flag to record the fact that the menu is no longer floating.

Conclusion

If you preview your page again, you should now see the final functioning effect. If you've been following along with the source code for the full demo, you'll notice that I also included some extras like a smooth scrolling script in that code... I'll leave that for you to explore!

In this tutorial, you've learned about using position: fixed in combination with jQuery to create a fun and useful "sticky" menu bar that always floats at the top of your page. Please share your thoughts and comments below!

Tell Others and Have Your Say

 
 
 
Log In
  Reset Password...
 
Why create an account?
  • Manage support tickets and purchases
  • Access to free extensions
  • Special discounts and offers
  • Access to member-only forums
Create Account
100% Spam-Free Guarantee
(Optional)
 

Use the following form to ask a question or submit a support request. An appropriate staff member will reply as soon as possible (usually within a few hours).
Contact Us / Create Support Ticket
 
To attach files, you must Sign Up or Log In.

You have no items in your basket.  Featured products:

XML Flash Slideshow v4 Flash Audio Kit for Dreamweaver

Home | Customer Satisfaction / Refund Policy | Privacy Policy | jQuery Slider | Top of Page

© 2003-2014 DWUser.com / Magnetic Marketing Corp.  All rights reserved.