Skip to content

Instantly share code, notes, and snippets.

@fthzkrtn
Last active December 17, 2015 21:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fthzkrtn/5677888 to your computer and use it in GitHub Desktop.
Save fthzkrtn/5677888 to your computer and use it in GitHub Desktop.
A simple navigation moving through page scrolling.
/**
* A simple movement script to create a simple attractive navigation
* Copyright (C) 2013 Fatih Karatana
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.*
*
**/
var header = jQuery('#header #nav'); // get the navigation would like to move
var current = header.offset().top; // get current offset
var isscroll = false; // check page is already scrolled
var init; // initial position
jQuery(document).on('scroll',function(){
init = header.position().top;
if ( init <= 1 ){ // check page scrolled to the top
if ( isscroll ){ // is already scrolled
header.hide(); // make some awesome visualization
header.css({
'position': 'inherit', // make position inherit to keep where it was at the beginning
'top': current
}).fadeIn("slow"); // show with a nice fade
isscroll=false; // not scrolling anymore
}
}else{
if ( !isscroll ){
header.hide();
header.css({
'position': 'fixed', // make position fixed to keep object at the top while scrolling
'top': 0
}).fadeIn("slow");
isscroll = true; // page is scrolled so no need to hide&show effect or changing position anymore
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment