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>
<a name="3"></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
<a href='#top'class="smoothScroll">HOME</a>