Implementing a sticky nav

jongacnik · jongacnik · commit cbea7f98b5d8 · 2013-04-13T21:04:49.000-07:00
diff --git a/css/style.css b/css/style.css
@@ -173,10 +173,12 @@ a.large-link:before {
 #navigation {
 	float: left;
 	width: 170px;
+	min-height: 20px;
 	margin-right: 20px;
 	color: #2c7bb5;
 }
 .navBar { padding: 0 20px 0 30px; }
+.navBar.stuck { position: fixed; top: 20px;}
 
 .navBar a { text-decoration: none; border: none; }
 
diff --git a/java_generate/templates/class.template.html b/java_generate/templates/class.template.html
@@ -18,6 +18,8 @@
 
 		<!-- ======== change the style link back later ============= -->
 		<link href="<!-- webcontentpath -->css/style.css" rel="stylesheet" type="text/css" />
+		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+		<script src="<!-- webcontentpath -->javascript/stickyNav.js" type="text/javascript"></script>
 	</head>
 	<body id="Langauge-en" onload="" >
 		
diff --git a/java_generate/templates/generic.template.html b/java_generate/templates/generic.template.html
@@ -17,6 +17,8 @@
 		<meta name="Copyright" content="All contents copyright Ben Fry, Casey Reas,  MIT Media Laboratory" />
 	
 		<link href="<!-- webcontentpath -->css/style.css" rel="stylesheet" type="text/css" />
+		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+		<script src="<!-- webcontentpath -->javascript/stickyNav.js" type="text/javascript"></script>
 	</head>
 	<body id="Langauge-en" onload="" >
 		
diff --git a/java_generate/templates/index.alphabetical.template.html b/java_generate/templates/index.alphabetical.template.html
@@ -17,8 +17,8 @@
 		<meta name="Copyright" content="All contents copyright Ben Fry, Casey Reas, MIT Media Laboratory" />
 	
 		<link href="<!-- webcontentpath -->css/style.css" rel="stylesheet" type="text/css" />
-		<script src="<!-- webcontentpath -->javascript/jquery-1.2.6.min.js" type="text/javascript">
-		</script>
+		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+		<script src="<!-- webcontentpath -->javascript/stickyNav.js" type="text/javascript"></script>
 	</head>
 	<body id="A-Z" onload="" >
 		
diff --git a/java_generate/templates/index.template.html b/java_generate/templates/index.template.html
@@ -17,7 +17,11 @@
 		<meta name="Copyright" content="All contents copyright Ben Fry, Casey Reas, MIT Media Laboratory" />
 	
 		<link href="<!-- webcontentpath -->css/style.css" rel="stylesheet" type="text/css" />
-		<!--<script src="javascript/jquery-1.2.6.min.js" type="text/javascript"> </script>-->
+
+
+		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+		<script src="<!-- webcontentpath -->javascript/stickyNav.js" type="text/javascript"></script>
+
 	</head>
 	<body id="language" onload="" >
 		<!-- ==================================== PAGE ============================ --> 
diff --git a/java_generate/templates/library.index.template.html b/java_generate/templates/library.index.template.html
@@ -17,6 +17,8 @@
 		<meta name="Copyright" content="All contents copyright Ben Fry, Casey Reas, MIT Media Laboratory" />
 	
 		<link href="<!-- webcontentpath -->css/style.css" rel="stylesheet" type="text/css" />
+		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+		<script src="<!-- webcontentpath -->javascript/stickyNav.js" type="text/javascript"></script>
 	</head>
 	<body id="Library-index" onload="" >
 		
diff --git a/javascript/stickyNav.js b/javascript/stickyNav.js
@@ -1,9 +1,9 @@
-// $(function(){
-// 	$(window).scroll(function(){
-// 		if($(this).scrollTop() > 130){
-// 			$('.navBar').addClass('stuck')
-// 		} else {
-// 			$('.navBar').removeClass('stuck')
-// 		}
-// 	})
-// })
+$(function(){
+	$(window).scroll(function(){
+		if($(this).scrollTop() > 114){
+			$('.navBar').addClass('stuck')
+		} else {
+			$('.navBar').removeClass('stuck')
+		}
+	})
+})
diff --git a/templates/template.html b/templates/template.html
@@ -17,6 +17,7 @@
 		
 		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 		<script src="<!--*-->relpath<!--*-->javascript/processing.js" type="text/javascript"></script>
+		<script src="<!--*-->relpath<!--*-->javascript/stickyNav.js" type="text/javascript"></script>
 		
 
 	    

Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,7 @@`
`17`	`17`
`18`	`18`	`<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>`
`19`	`19`	`<script src="<!---->relpath<!---->javascript/processing.js" type="text/javascript"></script>`
	`20`	`+ <script src="<!---->relpath<!---->javascript/stickyNav.js" type="text/javascript"></script>`
`20`	`21`
`21`	`22`
`22`	`23`