Skip to content

Instantly share code, notes, and snippets.

@allaniftrue

allaniftrue/index.html

Last active December 5, 2017 00:55
Show Gist options
  • Save allaniftrue/9279f1ccc5878d6c0752 to your computer and use it in GitHub Desktop.
Save allaniftrue/9279f1ccc5878d6c0752 to your computer and use it in GitHub Desktop.
Download ZIP
A gist for sticky menu with smooth scrolling
Raw
index.html
<!--
Repository: https://github.com/paparts/jQuery/tree/master/stick-menu
-->
<!DOCTYPE html>
<html lang="">
<head>
<title>Title Page</title>
<meta charset="UTF-8">
<meta name=description content="">
<meta name=viewport content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
<style>
body {
font:normal 14px/1.5 'Georgia', sans-serif;
background-color: #fff;
}
.mhl {
margin: 0;
padding: 0;
width: 100%;
height: 400px;
background: #f4f4f4 url('https://s3.amazonaws.com/ooomf-com-files/QAdTsSj8TOOWzlyLn3Rg_14248396556_aefcd9a926_o.jpg') center center no-repeat;
background-size: cover;
}
.active {
background-color: #dfdfdf;
}
nav {
width: 100%;
margin-bottom: 20px;
background-color: #c7c7c7;
}
ul.nav {
width: 100%;
padding: 0;
margin: 0;
}
ul.nav li {
float: left;
list-style: none;
padding:10px 20px;
}
ul.nav li:hover {
background-color: #dfdfdf;
}
ul.nav li a{
display: inline-block;
text-decoration: none;
color: #444;
}
ul li::after {
clear: both;
overflow: hidden;
}
.content {
width: 90%;
margin: 0 auto;
padding: 0 10px;
}
.clearfix {
clear: both;
overflow: hidden;
}
</style>
</head>
<body>
<div class="mhl"></div>
<div class="nav-wrapper">
<nav class="navigation">
<ul class="nav">
<li><a href="">Home</a></li>
<li><a href="#lorem">Lorem</a></li>
<li><a href="#ipsum">Ipsum</a></li>
<li><a href="#dolor">Dolor</a></li>
<li><a href="#active">Active</a></li>
<li><a href="#inactive">Inactive</a></li>
</ul>
<div class="clearfix"></div>
</nav>
</div>
<div class="content">
<p id="lorem">
Lorem ipsum Officia est exercitation dolore commodo quis id velit consectetur nisi voluptate eu sit consequat aute consequat laborum culpa aliqua sunt nisi magna in tempor culpa anim ut ad Duis proident ut incididunt et elit dolor in magna enim irure laboris cillum proident Duis aliquip Excepteur in ut minim minim nisi ad dolore esse reprehenderit id Ut fugiat ut anim ea tempor pariatur commodo ullamco ad cupidatat occaecat Duis Excepteur magna reprehenderit mollit ullamco ex eiusmod id reprehenderit Duis incididunt sint dolore ut laboris reprehenderit quis in adipisicing sunt nisi labore voluptate amet occaecat non commodo nulla nostrud irure id pariatur tempor laborum do deserunt dolor sunt dolor consectetur aliquip dolor eiusmod amet qui ad elit do in irure quis sed aute laboris eiusmod in irure adipisicing consectetur adipisicing magna cillum tempor reprehenderit nisi quis irure labore exercitation deserunt aliquip Ut consectetur qui velit Duis dolor Duis irure irure Duis proident ut consectetur minim in enim sit Excepteur consectetur incididunt et amet sed minim consectetur velit id ullamco ut ad dolor commodo sed dolore ea ad ut velit dolore consequat non occaecat fugiat consequat culpa ut et sed non minim quis minim dolor deserunt exercitation quis aliqua Duis ea adipisicing dolor voluptate velit nisi irure sed non nostrud sunt in pariatur adipisicing Ut proident culpa labore Excepteur nulla Duis nisi officia sunt esse cillum qui Ut sit dolore ex ex aliqua.
</p>
<p>
Lorem ipsum Ut esse sint dolor proident voluptate laboris et do labore sit laboris ex pariatur esse non elit Excepteur sint est incididunt commodo eiusmod voluptate elit in sunt in Duis aliqua proident ex ea cupidatat aute ut magna non ad proident sunt est Excepteur ex dolor labore velit dolor laborum eiusmod laboris Duis mollit labore nostrud dolor do tempor cillum dolor id velit sunt in sunt non irure aliquip aute culpa cupidatat eu non labore ut adipisicing dolore nulla labore tempor nulla officia cillum labore minim eiusmod anim sunt mollit amet ex occaecat do sit qui dolore eu adipisicing sed qui et velit occaecat dolore quis in nulla consectetur dolor voluptate dolor aute nisi Excepteur esse do non est incididunt occaecat et nostrud dolor velit reprehenderit velit in in labore Ut pariatur laborum in aliquip ea sit exercitation incididunt ut nostrud sit anim ut in tempor id non voluptate ea commodo nisi exercitation nisi labore ut dolore ullamco quis veniam sunt sint nulla voluptate ullamco occaecat est exercitation officia dolor Duis est fugiat sed magna in occaecat nisi pariatur id eu quis officia aute ut qui nulla esse labore sint laborum sed nostrud incididunt cillum sed culpa quis tempor deserunt id nulla minim tempor laboris amet occaecat in consequat ut consequat in ut sit cupidatat proident incididunt Excepteur eiusmod do sit nostrud aliqua proident dolore occaecat velit ut veniam eiusmod proident deserunt dolore.
</p>
<p>
Lorem ipsum Cillum dolore amet eiusmod ut cupidatat amet non laborum sunt id amet reprehenderit Excepteur esse sunt sit commodo incididunt dolor laboris ut incididunt ut proident esse incididunt amet dolore id proident voluptate sunt deserunt deserunt amet velit enim eu laboris elit id culpa laboris ea minim fugiat culpa irure ut sed fugiat eiusmod exercitation in ut eu magna laboris Duis dolor pariatur cillum do laboris anim sint elit do Ut veniam exercitation veniam adipisicing ut eu proident incididunt Ut consectetur esse in proident sit magna magna qui Ut occaecat deserunt sit tempor proident voluptate ea commodo nulla ad cupidatat laboris occaecat cupidatat aliqua magna amet quis do dolore et laboris deserunt consequat eu in dolore mollit anim commodo sed veniam quis consequat laboris voluptate do tempor tempor officia et reprehenderit eiusmod labore ea eiusmod occaecat ex id magna cillum Excepteur nisi velit mollit ullamco non nulla aliqua ut ut nisi mollit nostrud esse laboris ut voluptate ut consectetur voluptate.
</p>
<p id="ipsum">
Lorem ipsum Deserunt do sint exercitation in ex reprehenderit eiusmod est minim aliqua voluptate do irure qui cupidatat sunt dolor enim voluptate sunt nulla occaecat occaecat culpa mollit eu consequat aute irure ullamco nulla qui labore dolor eiusmod pariatur.
</p>
<p>
Lorem ipsum Veniam eiusmod officia culpa magna ad nostrud et Excepteur enim ullamco et consectetur amet quis reprehenderit aliquip dolore magna esse amet Duis nisi minim eu magna et irure ea est velit commodo dolor aliqua Duis eiusmod sint ad irure ullamco consectetur sed et labore Ut laborum minim non veniam ut mollit dolore velit deserunt consequat nostrud sint veniam do dolor sed aliqua Duis veniam nisi labore irure fugiat exercitation sunt aliquip eu reprehenderit dolore ut consectetur velit culpa elit eu do sunt proident consectetur deserunt qui ut ex adipisicing reprehenderit sunt laboris velit fugiat sed voluptate minim Excepteur aute ea mollit sit sunt sint dolor in aliqua voluptate reprehenderit consectetur aliqua eu pariatur dolore eu do nisi irure dolor cupidatat dolor sed labore quis anim ut mollit voluptate dolore eiusmod tempor adipisicing aliquip quis proident consectetur magna eu laboris elit elit aute anim in sed in ut aliquip non ullamco non qui nostrud enim tempor Ut laboris voluptate cupidatat nulla sit dolor pariatur nulla dolor fugiat nisi id irure non irure cupidatat pariatur nisi veniam proident in nostrud nisi nisi magna Duis elit quis reprehenderit commodo et consequat dolore aliqua mollit ex quis Excepteur nisi esse labore voluptate fugiat dolor veniam fugiat reprehenderit velit veniam amet.
</p>
<p id="dolor">
Lorem ipsum Sed deserunt do fugiat minim do qui amet voluptate id enim qui ea enim adipisicing nostrud anim ut cillum enim dolor velit tempor ut deserunt esse sunt non sit commodo ea ut dolor in sint commodo ex velit magna nisi amet esse Duis non laborum pariatur proident sit pariatur sint reprehenderit sit in anim magna dolor mollit exercitation velit dolor irure laboris non sed nisi dolore elit voluptate reprehenderit voluptate elit in in deserunt Excepteur in Duis aliqua sit laborum sunt commodo nostrud in ullamco voluptate deserunt Ut cupidatat et deserunt esse cupidatat nostrud aliquip sunt quis mollit laboris ut fugiat Ut sed et aute aliqua esse incididunt laboris sed anim deserunt enim adipisicing aliqua reprehenderit in aliqua eiusmod incididunt adipisicing adipisicing sunt consectetur quis fugiat enim Duis non voluptate pariatur adipisicing dolore esse minim esse fugiat deserunt incididunt ut mollit quis id enim dolor aliqua elit aliqua dolor in qui mollit exercitation ex dolore enim dolore deserunt esse aliqua voluptate magna tempor irure.
</p>
<p>
Lorem ipsum Qui voluptate in dolore ullamco ullamco sed id cupidatat aliquip labore sed nostrud enim in incididunt elit in est commodo Excepteur dolor commodo amet magna eiusmod ut amet aliqua ut ex eiusmod minim ullamco tempor amet commodo consectetur labore esse dolore dolor ut enim exercitation magna aute reprehenderit in sit dolor elit eu officia exercitation cupidatat ea irure dolore dolor aliqua ut ullamco culpa voluptate consequat proident sunt reprehenderit commodo commodo deserunt sint amet nostrud in sit culpa mollit do labore velit dolore reprehenderit culpa nulla in velit velit officia cupidatat sint minim sit minim et enim exercitation aliqua tempor non laboris dolore enim consequat cillum et ex sint dolor cupidatat in in non dolore Excepteur nostrud consequat dolor sed nostrud exercitation esse Ut sint aliqua Ut adipisicing sit cillum dolore sit nostrud adipisicing aute veniam non deserunt laborum non ut quis laboris Excepteur culpa tempor dolore in voluptate velit do aute exercitation.
</p>
<p id="active">
Lorem ipsum Ad qui veniam nulla elit magna non officia labore enim quis occaecat reprehenderit ad sint dolore amet in aute irure magna sunt Excepteur ut ad pariatur cillum dolore anim pariatur qui eiusmod reprehenderit ut nulla in ullamco ad Excepteur voluptate aliquip irure adipisicing eiusmod consectetur consectetur do dolor aliqua officia id sunt laborum incididunt ad elit enim eu laborum consectetur fugiat commodo non pariatur consequat consectetur Ut id adipisicing ea laboris consectetur quis minim aute non nulla esse laborum consectetur aliqua voluptate veniam laboris consectetur deserunt incididunt cupidatat quis ut do deserunt dolor dolor qui amet sunt adipisicing aute amet ex occaecat deserunt dolore officia eiusmod aute fugiat Excepteur commodo amet ut et fugiat occaecat do reprehenderit velit Excepteur sunt ad sit do labore laboris quis in in mollit nisi dolore do dolore nostrud mollit esse commodo ullamco labore nulla est minim sed ea et esse Ut fugiat minim aliquip occaecat nisi sunt ut proident adipisicing consectetur laborum.
</p>
<p>
Lorem ipsum Cupidatat deserunt labore sed voluptate velit ut adipisicing nisi velit laboris culpa anim ex sit commodo culpa do amet aliqua voluptate id labore non ex non nisi minim dolore mollit enim aute Ut ex veniam nisi magna ut proident aute enim ut occaecat ut in proident id eu tempor Excepteur irure do magna ut eu in ea adipisicing incididunt ullamco Ut consequat amet reprehenderit exercitation elit et sint ullamco exercitation et ea ut non adipisicing sit ullamco reprehenderit tempor fugiat tempor fugiat sunt in dolore ex dolore qui et qui sint aute aliqua culpa elit non non ullamco Excepteur commodo nostrud aliqua id nisi voluptate velit cupidatat magna occaecat occaecat consectetur consequat sit ad aute elit do incididunt non ullamco irure laboris exercitation labore consectetur consectetur sint pariatur ex sunt Excepteur nostrud deserunt dolor dolore qui minim consequat officia elit sint eu culpa in commodo qui tempor eiusmod officia in reprehenderit reprehenderit ad ut consequat occaecat magna in ea sed Duis ullamco ullamco non enim laboris in veniam dolor anim dolore dolore nulla culpa veniam mollit consectetur irure voluptate magna mollit Duis officia aliquip et Excepteur quis do commodo in sunt eiusmod anim aute est aliquip labore dolor culpa tempor do id ea cupidatat non cillum in nulla Duis.
</p>
<p>
Lorem ipsum Eiusmod commodo aliquip id id minim ex enim officia ex pariatur dolor proident velit consequat culpa ut aliquip do deserunt fugiat est reprehenderit occaecat nostrud est non cillum in culpa sunt dolore laborum ad est culpa eu incididunt occaecat sint Excepteur cillum sit et mollit dolor do deserunt cillum ut aliqua ut sit consectetur elit id sed incididunt Excepteur minim id exercitation nulla ex anim et reprehenderit nisi ullamco incididunt eu sed sint nulla eu pariatur nulla aliqua dolor in cillum ut fugiat sint Ut anim cupidatat consectetur non sint fugiat eiusmod in cillum ex eu et id reprehenderit Excepteur laboris dolor anim in mollit Ut magna pariatur in sunt aute sunt est anim occaecat tempor nisi incididunt nisi in enim consequat ad fugiat elit eiusmod sed fugiat nostrud dolor consectetur in exercitation consectetur occaecat consequat dolor ut commodo fugiat dolor in id laborum ea quis proident nostrud in eu nulla dolor ut esse Ut non incididunt cillum eiusmod ullamco ea consectetur sed labore officia enim elit qui ad incididunt adipisicing Excepteur exercitation elit proident veniam officia non irure esse id elit in exercitation cupidatat dolor et dolor irure sunt adipisicing nisi dolore Excepteur exercitation sunt adipisicing aute proident aliquip magna sit sit ut cillum velit cupidatat nulla Excepteur tempor aliqua qui id consectetur laborum enim minim ex.
</p>
<p id="inactive">
Lorem ipsum Ad nulla eu in fugiat mollit dolore sit cupidatat pariatur culpa nisi nostrud eiusmod commodo tempor Ut exercitation laboris non esse tempor ut in reprehenderit dolor eu laborum Excepteur eiusmod cillum sit qui cillum Duis Excepteur aliqua officia esse officia aliqua cillum voluptate non aliquip quis eiusmod mollit sed irure in dolore mollit in sed quis consequat nostrud consectetur velit minim id quis officia commodo tempor nisi enim Duis consectetur consequat in incididunt enim voluptate cillum sed tempor laboris amet occaecat magna ullamco dolore deserunt esse minim amet commodo id velit sed amet Ut commodo magna dolore aliqua amet id cillum exercitation consequat ea id in in in laborum aliqua ad fugiat sint sit est consectetur cupidatat esse velit pariatur aliquip cillum minim veniam dolore qui occaecat Excepteur et aute quis qui dolor exercitation et velit laborum in aute quis proident Ut tempor amet ut nostrud ex Duis enim Duis nostrud eu esse deserunt commodo ut esse amet consequat qui incididunt ad elit dolore id ut qui Ut anim dolore minim voluptate fugiat adipisicing non labore aliqua Ut nisi ut elit sed est aliqua magna qui amet dolore adipisicing aute reprehenderit aliquip eiusmod quis culpa Excepteur adipisicing deserunt in eiusmod dolor in incididunt laboris occaecat magna enim Ut eu aute consequat proident sunt aliquip reprehenderit labore occaecat in nulla cillum mollit et proident ad magna est in cillum.
</p>
<p>
Lorem ipsum Ullamco voluptate Ut in dolor deserunt ullamco esse dolor sit mollit non adipisicing ut nulla do esse anim officia labore ullamco veniam velit do incididunt laboris officia et cillum id voluptate Ut dolor Duis quis anim reprehenderit in esse in ullamco laborum dolor ut sunt do qui Ut sit quis Excepteur ex laboris exercitation sed adipisicing anim elit consectetur in exercitation dolore elit nostrud elit et pariatur ullamco esse est anim culpa nisi eiusmod incididunt dolore aliqua ullamco minim dolor minim in laborum adipisicing eu velit commodo sint ex pariatur reprehenderit proident minim consequat mollit non incididunt sunt sed sit cillum aliquip occaecat nulla anim ut do sit proident ut ad qui dolore minim anim labore sed dolore proident labore dolore officia consequat eu est fugiat ullamco fugiat ut consequat velit minim est et quis magna minim commodo nostrud veniam voluptate.
</p>
<p>
Lorem ipsum Ut et esse Duis nisi in voluptate eu ut aute sed ad et velit et minim adipisicing sed aliqua proident officia tempor pariatur consectetur ut consectetur anim dolor pariatur anim fugiat ad ut nulla culpa ut nostrud Excepteur eu aliqua reprehenderit laborum ad irure ad laboris ut est irure Duis exercitation fugiat ullamco id sit aliquip dolore dolore labore laboris sed incididunt quis dolore anim aute culpa ad voluptate enim reprehenderit sit magna Duis cillum culpa exercitation laborum velit cillum do laboris anim irure nisi et ullamco officia sed in sint ullamco ex enim enim dolore minim qui aute voluptate occaecat labore cillum quis velit fugiat commodo tempor deserunt labore commodo quis occaecat do fugiat magna Ut est velit aliqua minim mollit quis elit in laborum Ut nulla ut sunt eu fugiat commodo nulla est sunt aliquip commodo enim sint commodo ea elit in ut pariatur cupidatat mollit sint quis esse ea culpa occaecat Ut dolor cillum non aliquip pariatur anim tempor elit ad voluptate eiusmod ut aliqua sed sunt enim fugiat dolor eiusmod sit id aliquip aute tempor officia labore ullamco sed sit Excepteur cupidatat ut ut veniam in anim velit enim tempor quis quis Ut aliqua id.
</p>
<p>
Lorem ipsum Ullamco voluptate Ut in dolor deserunt ullamco esse dolor sit mollit non adipisicing ut nulla do esse anim officia labore ullamco veniam velit do incididunt laboris officia et cillum id voluptate Ut dolor Duis quis anim reprehenderit in esse in ullamco laborum dolor ut sunt do qui Ut sit quis Excepteur ex laboris exercitation sed adipisicing anim elit consectetur in exercitation dolore elit nostrud elit et pariatur ullamco esse est anim culpa nisi eiusmod incididunt dolore aliqua ullamco minim dolor minim in laborum adipisicing eu velit commodo sint ex pariatur reprehenderit proident minim consequat mollit non incididunt sunt sed sit cillum aliquip occaecat nulla anim ut do sit proident ut ad qui dolore minim anim labore sed dolore proident labore dolore officia consequat eu est fugiat ullamco fugiat ut consequat velit minim est et quis magna minim commodo nostrud veniam voluptate.
</p>
<p>
Lorem ipsum Ut et esse Duis nisi in voluptate eu ut aute sed ad et velit et minim adipisicing sed aliqua proident officia tempor pariatur consectetur ut consectetur anim dolor pariatur anim fugiat ad ut nulla culpa ut nostrud Excepteur eu aliqua reprehenderit laborum ad irure ad laboris ut est irure Duis exercitation fugiat ullamco id sit aliquip dolore dolore labore laboris sed incididunt quis dolore anim aute culpa ad voluptate enim reprehenderit sit magna Duis cillum culpa exercitation laborum velit cillum do laboris anim irure nisi et ullamco officia sed in sint ullamco ex enim enim dolore minim qui aute voluptate occaecat labore cillum quis velit fugiat commodo tempor deserunt labore commodo quis occaecat do fugiat magna Ut est velit aliqua minim mollit quis elit in laborum Ut nulla ut sunt eu fugiat commodo nulla est sunt aliquip commodo enim sint commodo ea elit in ut pariatur cupidatat mollit sint quis esse ea culpa occaecat Ut dolor cillum non aliquip pariatur anim tempor elit ad voluptate eiusmod ut aliqua sed sunt enim fugiat dolor eiusmod sit id aliquip aute tempor officia labore ullamco sed sit Excepteur cupidatat ut ut veniam in anim velit enim tempor quis quis Ut aliqua id.
</p>
<p>
Lorem ipsum Ullamco voluptate Ut in dolor deserunt ullamco esse dolor sit mollit non adipisicing ut nulla do esse anim officia labore ullamco veniam velit do incididunt laboris officia et cillum id voluptate Ut dolor Duis quis anim reprehenderit in esse in ullamco laborum dolor ut sunt do qui Ut sit quis Excepteur ex laboris exercitation sed adipisicing anim elit consectetur in exercitation dolore elit nostrud elit et pariatur ullamco esse est anim culpa nisi eiusmod incididunt dolore aliqua ullamco minim dolor minim in laborum adipisicing eu velit commodo sint ex pariatur reprehenderit proident minim consequat mollit non incididunt sunt sed sit cillum aliquip occaecat nulla anim ut do sit proident ut ad qui dolore minim anim labore sed dolore proident labore dolore officia consequat eu est fugiat ullamco fugiat ut consequat velit minim est et quis magna minim commodo nostrud veniam voluptate.
</p>
<p>
Lorem ipsum Ut et esse Duis nisi in voluptate eu ut aute sed ad et velit et minim adipisicing sed aliqua proident officia tempor pariatur consectetur ut consectetur anim dolor pariatur anim fugiat ad ut nulla culpa ut nostrud Excepteur eu aliqua reprehenderit laborum ad irure ad laboris ut est irure Duis exercitation fugiat ullamco id sit aliquip dolore dolore labore laboris sed incididunt quis dolore anim aute culpa ad voluptate enim reprehenderit sit magna Duis cillum culpa exercitation laborum velit cillum do laboris anim irure nisi et ullamco officia sed in sint ullamco ex enim enim dolore minim qui aute voluptate occaecat labore cillum quis velit fugiat commodo tempor deserunt labore commodo quis occaecat do fugiat magna Ut est velit aliqua minim mollit quis elit in laborum Ut nulla ut sunt eu fugiat commodo nulla est sunt aliquip commodo enim sint commodo ea elit in ut pariatur cupidatat mollit sint quis esse ea culpa occaecat Ut dolor cillum non aliquip pariatur anim tempor elit ad voluptate eiusmod ut aliqua sed sunt enim fugiat dolor eiusmod sit id aliquip aute tempor officia labore ullamco sed sit Excepteur cupidatat ut ut veniam in anim velit enim tempor quis quis Ut aliqua id.
</p>
<p>
Lorem ipsum Ullamco voluptate Ut in dolor deserunt ullamco esse dolor sit mollit non adipisicing ut nulla do esse anim officia labore ullamco veniam velit do incididunt laboris officia et cillum id voluptate Ut dolor Duis quis anim reprehenderit in esse in ullamco laborum dolor ut sunt do qui Ut sit quis Excepteur ex laboris exercitation sed adipisicing anim elit consectetur in exercitation dolore elit nostrud elit et pariatur ullamco esse est anim culpa nisi eiusmod incididunt dolore aliqua ullamco minim dolor minim in laborum adipisicing eu velit commodo sint ex pariatur reprehenderit proident minim consequat mollit non incididunt sunt sed sit cillum aliquip occaecat nulla anim ut do sit proident ut ad qui dolore minim anim labore sed dolore proident labore dolore officia consequat eu est fugiat ullamco fugiat ut consequat velit minim est et quis magna minim commodo nostrud veniam voluptate.
</p>
<p>
Lorem ipsum Ut et esse Duis nisi in voluptate eu ut aute sed ad et velit et minim adipisicing sed aliqua proident officia tempor pariatur consectetur ut consectetur anim dolor pariatur anim fugiat ad ut nulla culpa ut nostrud Excepteur eu aliqua reprehenderit laborum ad irure ad laboris ut est irure Duis exercitation fugiat ullamco id sit aliquip dolore dolore labore laboris sed incididunt quis dolore anim aute culpa ad voluptate enim reprehenderit sit magna Duis cillum culpa exercitation laborum velit cillum do laboris anim irure nisi et ullamco officia sed in sint ullamco ex enim enim dolore minim qui aute voluptate occaecat labore cillum quis velit fugiat commodo tempor deserunt labore commodo quis occaecat do fugiat magna Ut est velit aliqua minim mollit quis elit in laborum Ut nulla ut sunt eu fugiat commodo nulla est sunt aliquip commodo enim sint commodo ea elit in ut pariatur cupidatat mollit sint quis esse ea culpa occaecat Ut dolor cillum non aliquip pariatur anim tempor elit ad voluptate eiusmod ut aliqua sed sunt enim fugiat dolor eiusmod sit id aliquip aute tempor officia labore ullamco sed sit Excepteur cupidatat ut ut veniam in anim velit enim tempor quis quis Ut aliqua id.
</p>
</div>
<!-- jQuery -->
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(document).ready(function(){
var $nav = $('.navigation'),
$mhlHeight = $('.mhl').height(),
fixedStyle = {
'position':'fixed',
'top':0,
'left':0,
'z-index':1
},
navHeight = $nav.height();
/*
A bit funny but if you remove this, the nav menu will
overlap on the target when you click from the top.
I know, you will try to remove this.
*/
$('.nav-wrapper').css('height', navHeight);
/*
check if user has already scrolled at the bottom and refreshed the page
*/
if($(window).scrollTop() >= $mhlHeight ) {
$nav.css(fixedStyle);
}
/*
trigger css when scrolling
*/
$(window).scroll(function() {
var $y = $(this).scrollTop();
if($y > $mhlHeight) {
$nav.css(fixedStyle);
} else {
$nav.css({
'position':'static'
});
}
});
/*
smooth scrolling
*/
$('li a:not(li a:eq(0))').click(function(e){
e.preventDefault();
var hrefAttr = $(this).attr('href'),
$idYPos = $(hrefAttr).offset().top;
$('html,body').animate({
scrollTop: $idYPos - (navHeight+10)
}, 1000);
/*
Active Menu
*/
$('.nav li').each(function(){
$(this).removeClass('active');
});
$(this).parent('li').attr('class','active');
});
/* no use just to add background on targeted paragraphs, so lazy to add css */
$('p').each(function(){
if(typeof $(this).attr('id') != 'undefined') {
$(this).css({
'padding':'5px',
'background-color':'#f4f4f4',
'border-radius':'3px'
});
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment