Skip to content

Instantly share code, notes, and snippets.

@ezos86

ezos86/scroll-fixed-nav.html

Created August 12, 2013 20:19
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ezos86/6214743 to your computer and use it in GitHub Desktop.
Save ezos86/6214743 to your computer and use it in GitHub Desktop.
Download ZIP
Nav Bar Mid-page - scroll and then fixed at top of page.
Raw
scroll-fixed-nav.html
<!DOCTYPE>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<title></title>
</head>
<body>
<div style="height:3000px; position:relative; margin-top:150px; float:left;">
<span id="subnav" style="background-color:#000; height:20px; color:#fff; width:100%; float:left;">hold this</span>
</div>
</body>
<script>
$(document).ready(function() {
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
if ( scrollVal > 150) {
$('#subnav').css({'position':'fixed','top' :'0px'});
} else {
$('#subnav').css({'position':'static','top':'auto'});
}
});
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment