Demo - Creating a Floating Navigation Menu

1. jQuery : sticky nav

This demo is associated with the following article/tutorial: Creating a Floating Navigation Menu

it uses jQuery :

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'>
</script>

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
/**
************************************************************
*************** THIS IS THE NAVIGATION 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;
}
});
});

</script>

2. ".smoothScroll"

<script type='text/javascript'>

/**
************************************************************
*** THIS IS THE ADD-IN SMOOTH SCROLLING CODE ***************
*** (see: http://www.dwuser.com/education/content/quick-guide-adding-smooth-scrolling-to-your-webpages/ )
************************************************************
**/

/**
* SmoothScroll
* This helper script created by DWUser.com. Copyright 2012 DWUser.com.
* Dual-licensed under the GPL and MIT licenses.
* All individual scripts remain property of their copyrighters.
* Date: 10-Sep-2012
* Version: 1.0.1
*/
if (!window['jQuery']) alert('The jQuery library must be included before the smoothscroll.js file.
The plugin will not work propery.');

/**
* jQuery.ScrollTo - Easy element scrolling using jQuery.
* Copyright (c) 2007-2012 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
* Dual licensed under MIT and GPL.
* @author Ariel Flesler
* @version 1.4.3.1
*/
).filter(e).bind(a.event,function(b){g(b,this,a)}).end().end()}})(jQuery);

// Initialize all .smoothScroll links
jQuery(function($){ $.localScroll({filter:'.smoothScroll'}); });

-------- to see all jQuery Code : VIEW THE PAGE SOURCE TO COPY --------

});//]]>

</script>

*BASICALLY, you would have links going to different names on the page
Example:

<a name="top"></a>

<a href="#3" class="smoothScroll">display : none;</a>
<a href='#top'class="smoothScroll">HOME</a>

3. display : none;

Inspired by : http://www.dwuser.com/education/content/creating-a-floating-navigation-menu/demo/scrolling_detection.html

I put the following HTML code above the <div id="nav">

<p id="magicBox"></p>

Then I added a logo next to "nav"

<div id="logo2"><img src="logo.png" width="64" height="64" alt="rS"></div>

Then added some CSS to hide the logo after "magicBox" hits the top of the browser window

<style>
.hiddenClass{
display:none;
}
</style>

And, used the following jQuery to make it work:

<script type='text/javascript'>

$(window).load(function(){
$(function() {

var magicBoxY = $('#magicBox').offset().top;

var $w = $(window);
$w.scroll(function() {

var scrollPosition = $w.scrollTop();

var belowMagicBox = scrollPosition >= magicBoxY;
$('#logo2').toggleClass('hiddenClass', belowMagicBox);

});
});

});

</script>

4. HOME

The following code will take you to the top of the page