Skip to content

Instantly share code, notes, and snippets.

@jufemaiz

jufemaiz/index.html

Last active December 14, 2015 08: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 jufemaiz/5060701 to your computer and use it in GitHub Desktop.
Save jufemaiz/5060701 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Colin's Questions</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="https://raw.github.com/h5bp/html5-boilerplate/master/css/normalize.css">
<link rel="stylesheet" href="https://raw.github.com/h5bp/html5-boilerplate/master/css/main.css">
<script src="https://raw.github.com/h5bp/html5-boilerplate/master/js/vendor/modernizr-2.6.2.min.js"></script>
<!-- Local script and styles -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<nav>
<ul class="clear">
<li><a href="#step1">Cal</a></li>
<li><a href="#step2">Guage</a></li>
<li><a href="#step3">Heart</a>
</ul>
</nav>
<div class="content">
<section id="step1">
<h2>Calendar</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed cursus dolor. Phasellus tortor odio, rhoncus sed dictum at, tempor eu sapien. Sed tempus velit et mi laoreet at viverra velit sodales. Nunc vulputate consequat eros, quis semper tellus vulputate id. Suspendisse potenti. Fusce porttitor, turpis vitae tempor vehicula, neque nibh iaculis quam, sed ultricies mi est non eros. Vivamus id ullamcorper erat. Curabitur massa ligula, imperdiet nec sodales ultricies, dignissim pharetra felis. Proin mauris erat, ultrices ut sodales ac, faucibus sed ipsum. Duis fermentum leo et lacus consectetur iaculis. Suspendisse pellentesque accumsan erat eu rutrum. Curabitur enim elit, consectetur a ultrices ac, tristique nec sem. Pellentesque ut lacus dignissim neque fringilla hendrerit ac et enim. Mauris nec velit eros, eu ornare dui. Vestibulum tincidunt cursus nisi placerat facilisis.
</p>
<p>
Integer quis orci turpis, a condimentum tellus. Ut bibendum fringilla diam sed iaculis. Curabitur iaculis, leo quis luctus semper, nisl eros scelerisque dolor, ac tempus diam risus tincidunt quam. Nam sodales massa quis metus consectetur non imperdiet sapien pharetra. Integer ut est vel ante dictum sollicitudin non eget enim. Sed vitae ipsum sed arcu interdum feugiat at vel ligula. Duis id odio at libero interdum porta.
</p>
<p>
Vestibulum eu nisi posuere nunc tristique venenatis sit amet eget lectus. Mauris dictum lorem sed nunc egestas porttitor. Sed quis arcu lectus, ut dignissim dolor. Mauris viverra felis in sapien facilisis tempus. Donec sed ante tellus, et laoreet lorem. Proin quis risus ac ipsum hendrerit dictum. Curabitur non dapibus mauris. Integer at nibh diam. Integer ullamcorper dapibus dolor, id aliquet tellus rhoncus vel.
</p>
<p>
Etiam at arcu justo. In hac habitasse platea dictumst. Nunc urna ante, posuere in dignissim vel, mattis ut lectus. Duis quis quam dolor. Phasellus felis arcu, faucibus non auctor placerat, posuere nec ante. Pellentesque vel bibendum risus. Sed non felis vitae mauris suscipit porta a vitae mauris. Maecenas id augue lectus, sed venenatis est. In pharetra gravida mi, non lacinia nisi pharetra vel. In molestie augue sit amet magna mollis fringilla vulputate vitae nibh. Nulla facilisi. Integer neque turpis, congue in tempus pulvinar, iaculis in felis. In hac habitasse platea dictumst. Morbi eleifend dolor vitae quam sodales sodales. Morbi massa erat, lacinia vitae elementum quis, faucibus vitae arcu. Quisque ac massa nibh.
</p>
<p>
Morbi venenatis mi ac dolor eleifend varius. Nulla sed sapien quis enim ultrices aliquet at eget eros. Cras pulvinar pharetra nulla sit amet sollicitudin. Aenean dolor libero, mollis a tristique eget, facilisis ac urna. Nam pellentesque lacus ac tortor volutpat lobortis. Praesent sit amet tellus libero. Ut augue justo, porttitor sed faucibus eget, elementum quis tellus. Donec ut diam a libero congue commodo. Vestibulum sit amet enim arcu. Suspendisse ultricies iaculis congue. Mauris mi elit, venenatis sed eleifend in, posuere vel lorem.
</p>
</section>
<section id="step2">
<h2>Guage</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed cursus dolor. Phasellus tortor odio, rhoncus sed dictum at, tempor eu sapien. Sed tempus velit et mi laoreet at viverra velit sodales. Nunc vulputate consequat eros, quis semper tellus vulputate id. Suspendisse potenti. Fusce porttitor, turpis vitae tempor vehicula, neque nibh iaculis quam, sed ultricies mi est non eros. Vivamus id ullamcorper erat. Curabitur massa ligula, imperdiet nec sodales ultricies, dignissim pharetra felis. Proin mauris erat, ultrices ut sodales ac, faucibus sed ipsum. Duis fermentum leo et lacus consectetur iaculis. Suspendisse pellentesque accumsan erat eu rutrum. Curabitur enim elit, consectetur a ultrices ac, tristique nec sem. Pellentesque ut lacus dignissim neque fringilla hendrerit ac et enim. Mauris nec velit eros, eu ornare dui. Vestibulum tincidunt cursus nisi placerat facilisis.
</p>
<p>
Integer quis orci turpis, a condimentum tellus. Ut bibendum fringilla diam sed iaculis. Curabitur iaculis, leo quis luctus semper, nisl eros scelerisque dolor, ac tempus diam risus tincidunt quam. Nam sodales massa quis metus consectetur non imperdiet sapien pharetra. Integer ut est vel ante dictum sollicitudin non eget enim. Sed vitae ipsum sed arcu interdum feugiat at vel ligula. Duis id odio at libero interdum porta.
</p>
<p>
Vestibulum eu nisi posuere nunc tristique venenatis sit amet eget lectus. Mauris dictum lorem sed nunc egestas porttitor. Sed quis arcu lectus, ut dignissim dolor. Mauris viverra felis in sapien facilisis tempus. Donec sed ante tellus, et laoreet lorem. Proin quis risus ac ipsum hendrerit dictum. Curabitur non dapibus mauris. Integer at nibh diam. Integer ullamcorper dapibus dolor, id aliquet tellus rhoncus vel.
</p>
<p>
Etiam at arcu justo. In hac habitasse platea dictumst. Nunc urna ante, posuere in dignissim vel, mattis ut lectus. Duis quis quam dolor. Phasellus felis arcu, faucibus non auctor placerat, posuere nec ante. Pellentesque vel bibendum risus. Sed non felis vitae mauris suscipit porta a vitae mauris. Maecenas id augue lectus, sed venenatis est. In pharetra gravida mi, non lacinia nisi pharetra vel. In molestie augue sit amet magna mollis fringilla vulputate vitae nibh. Nulla facilisi. Integer neque turpis, congue in tempus pulvinar, iaculis in felis. In hac habitasse platea dictumst. Morbi eleifend dolor vitae quam sodales sodales. Morbi massa erat, lacinia vitae elementum quis, faucibus vitae arcu. Quisque ac massa nibh.
</p>
<p>
Morbi venenatis mi ac dolor eleifend varius. Nulla sed sapien quis enim ultrices aliquet at eget eros. Cras pulvinar pharetra nulla sit amet sollicitudin. Aenean dolor libero, mollis a tristique eget, facilisis ac urna. Nam pellentesque lacus ac tortor volutpat lobortis. Praesent sit amet tellus libero. Ut augue justo, porttitor sed faucibus eget, elementum quis tellus. Donec ut diam a libero congue commodo. Vestibulum sit amet enim arcu. Suspendisse ultricies iaculis congue. Mauris mi elit, venenatis sed eleifend in, posuere vel lorem.
</p>
</section>
<section id="step3">
<h2>Heart</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed cursus dolor. Phasellus tortor odio, rhoncus sed dictum at, tempor eu sapien. Sed tempus velit et mi laoreet at viverra velit sodales. Nunc vulputate consequat eros, quis semper tellus vulputate id. Suspendisse potenti. Fusce porttitor, turpis vitae tempor vehicula, neque nibh iaculis quam, sed ultricies mi est non eros. Vivamus id ullamcorper erat. Curabitur massa ligula, imperdiet nec sodales ultricies, dignissim pharetra felis. Proin mauris erat, ultrices ut sodales ac, faucibus sed ipsum. Duis fermentum leo et lacus consectetur iaculis. Suspendisse pellentesque accumsan erat eu rutrum. Curabitur enim elit, consectetur a ultrices ac, tristique nec sem. Pellentesque ut lacus dignissim neque fringilla hendrerit ac et enim. Mauris nec velit eros, eu ornare dui. Vestibulum tincidunt cursus nisi placerat facilisis.
</p>
<p>
Integer quis orci turpis, a condimentum tellus. Ut bibendum fringilla diam sed iaculis. Curabitur iaculis, leo quis luctus semper, nisl eros scelerisque dolor, ac tempus diam risus tincidunt quam. Nam sodales massa quis metus consectetur non imperdiet sapien pharetra. Integer ut est vel ante dictum sollicitudin non eget enim. Sed vitae ipsum sed arcu interdum feugiat at vel ligula. Duis id odio at libero interdum porta.
</p>
<p>
Vestibulum eu nisi posuere nunc tristique venenatis sit amet eget lectus. Mauris dictum lorem sed nunc egestas porttitor. Sed quis arcu lectus, ut dignissim dolor. Mauris viverra felis in sapien facilisis tempus. Donec sed ante tellus, et laoreet lorem. Proin quis risus ac ipsum hendrerit dictum. Curabitur non dapibus mauris. Integer at nibh diam. Integer ullamcorper dapibus dolor, id aliquet tellus rhoncus vel.
</p>
<p>
Etiam at arcu justo. In hac habitasse platea dictumst. Nunc urna ante, posuere in dignissim vel, mattis ut lectus. Duis quis quam dolor. Phasellus felis arcu, faucibus non auctor placerat, posuere nec ante. Pellentesque vel bibendum risus. Sed non felis vitae mauris suscipit porta a vitae mauris. Maecenas id augue lectus, sed venenatis est. In pharetra gravida mi, non lacinia nisi pharetra vel. In molestie augue sit amet magna mollis fringilla vulputate vitae nibh. Nulla facilisi. Integer neque turpis, congue in tempus pulvinar, iaculis in felis. In hac habitasse platea dictumst. Morbi eleifend dolor vitae quam sodales sodales. Morbi massa erat, lacinia vitae elementum quis, faucibus vitae arcu. Quisque ac massa nibh.
</p>
<p>
Morbi venenatis mi ac dolor eleifend varius. Nulla sed sapien quis enim ultrices aliquet at eget eros. Cras pulvinar pharetra nulla sit amet sollicitudin. Aenean dolor libero, mollis a tristique eget, facilisis ac urna. Nam pellentesque lacus ac tortor volutpat lobortis. Praesent sit amet tellus libero. Ut augue justo, porttitor sed faucibus eget, elementum quis tellus. Donec ut diam a libero congue commodo. Vestibulum sit amet enim arcu. Suspendisse ultricies iaculis congue. Mauris mi elit, venenatis sed eleifend in, posuere vel lorem.
</p>
</section>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="https://raw.github.com/h5bp/html5-boilerplate/master/js/plugins.js"></script>
<script src="https://raw.github.com/h5bp/html5-boilerplate/master/js/main.js"></script>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
// Scripts
$(document).ready(function(){
$(document).scroll(function(){
var nav = $('nav');
var content = $('div.content');
var sections = $('section',content);
var scroll = $(this).scrollTop()
// Reset the active navigation element
$('ul li',nav).removeClass('active');
// Determine the current active element
sections.each(function(i,el){
var nav_element = $('ul li a[href=#'+el.id+']').parent();
if(nav_element.length == 1) {
el = $(el);
if(scroll >= el.offset().top && scroll < (el.offset().top + el.height())) {
nav_element.addClass('active');
}
}
});
// Set the default if none has been set
if ($('ul li.active',nav).length == 0) {
$('ul li:first',nav).addClass('active');
}
});
});
Raw
style.css
/* Styles */
body {
width: 200px;
margin: 0 auto;
font-family: Helvetica, Arial, sans-serif;
}
nav {
position: fixed;
bottom: 0;
left: 0;
}
nav ul, nav ul li {
margin: 0;
padding: 0;
list-style: none;
}
nav ul li a {
color: #666;
}
nav ul li.active a {
color: red;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment