Skip to content

Instantly share code, notes, and snippets.

@strictlymomo

strictlymomo/pagefragment.html

Created June 15, 2016 22:35
Show Gist options
  • Save strictlymomo/430bf28d6aee01eeda8637c6591d8fba to your computer and use it in GitHub Desktop.
Save strictlymomo/430bf28d6aee01eeda8637c6591d8fba to your computer and use it in GitHub Desktop.
Download ZIP
Raw
pagefragment.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>MDN Example</title>
<script src="https://code.jquery.com/jquery-3.0.0.js" integrity="sha256-jrPLZ+8vDxt2FnE1zvZXCkCcebI/C8Dt5xyaQBjxQIo=" crossorigin="anonymous"></script>
<style>
#navigation {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3em;
z-index: 1;
background: #fff;
opacity: .9;
}
ul {
list-style-type:none;
}
li {
display: inline-block;
}
nav > ul > li > a {
text-decoration: none;
padding-right: 2em;
}
section {
display: block;
height: 100%;
height: 100vh;
border-bottom: 4px solid #000;
}
.active {
background: #ccc;
}
</style>
</head>
<body>
<nav role="navigation" id="navigation" class="menu">
<ul>
<li class="active"><a class="menu-a" href="#Index">Home</a></li>
<li><a class="menu-a" href="#Photos">Photos</a></li>
<li><a class="menu-a" href="#Work">Work</a></li>
<li><a class="menu-a" href="#Service">Service</a></li>
<li><a class="menu-a" href="#About">About</a></li>
<li><a class="menu-a" href="#Contact">Contact</a></li>
</ul>
</nav>
<div id="site-wrapper">
<section id="Index">
<article>
<p class="section-content">SECTION 1 = Index</p>
<p class="section-content">SECTION 1 = Index</p>
<p class="section-content">SECTION 1 = Index</p>
<p class="section-content">SECTION 1 = Index</p>
<p class="section-content">SECTION 1 = Index</p>
<p class="section-content">SECTION 1 = Index</p>
<p class="section-content">SECTION 1 = Index</p>
<p class="section-content">SECTION 1 = Index</p>
<p class="section-content">SECTION 1 = Index</p>
<p class="section-content">SECTION 1 = Index</p>
</article>
</section> <!-- end -->
<section id="Photos">
<article>
<p class="section-content">SECTION 2 = Photos</p>
<p class="section-content">SECTION 2 = Photos</p>
<p class="section-content">SECTION 2 = Photos</p>
<p class="section-content">SECTION 2 = Photos</p>
<p class="section-content">SECTION 2 = Photos</p>
<p class="section-content">SECTION 2 = Photos</p>
<p class="section-content">SECTION 2 = Photos</p>
<p class="section-content">SECTION 2 = Photos</p>
<p class="section-content">SECTION 2 = Photos</p>
<p class="section-content">SECTION 2 = Photos</p>
</article>
</section>
<section id="Work">
<article>
<p class="section-content">SECTION 3 = Work</p>
<p class="section-content">SECTION 3 = Work</p>
<p class="section-content">SECTION 3 = Work</p>
<p class="section-content">SECTION 3 = Work</p>
<p class="section-content">SECTION 3 = Work</p>
<p class="section-content">SECTION 3 = Work</p>
<p class="section-content">SECTION 3 = Work</p>
<p class="section-content">SECTION 3 = Work</p>
<p class="section-content">SECTION 3 = Work</p>
<p class="section-content">SECTION 3 = Work</p>
</article>
</section>
<section id="Service">
<article>
<p class="section-content">SECTION 4 = Service</p>
<p class="section-content">SECTION 4 = Service</p>
<p class="section-content">SECTION 4 = Service</p>
<p class="section-content">SECTION 4 = Service</p>
<p class="section-content">SECTION 4 = Service</p>
<p class="section-content">SECTION 4 = Service</p>
<p class="section-content">SECTION 4 = Service</p>
<p class="section-content">SECTION 4 = Service</p>
<p class="section-content">SECTION 4 = Service</p>
<p class="section-content">SECTION 4 = Service</p>
<p class="section-content">SECTION 4 = Service</p>
</article>
</section>
<section id="About">
<article>
<p class="section-content">SECTION 5 = About</p>
<p class="section-content">SECTION 5 = About</p>
<p class="section-content">SECTION 5 = About</p>
<p class="section-content">SECTION 5 = About</p>
<p class="section-content">SECTION 5 = About</p>
<p class="section-content">SECTION 5 = About</p>
<p class="section-content">SECTION 5 = About</p>
<p class="section-content">SECTION 5 = About</p>
<p class="section-content">SECTION 5 = About</p>
<p class="section-content">SECTION 5 = About</p>
</article>
</section>
<section id="Contact">
<article>
<p class="section-content">SECTION 6 = Contact</p>
<p class="section-content">SECTION 6 = Contact</p>
<p class="section-content">SECTION 6 = Contact</p>
<p class="section-content">SECTION 6 = Contact</p>
<p class="section-content">SECTION 6 = Contact</p>
<p class="section-content">SECTION 6 = Contact</p>
<p class="section-content">SECTION 6 = Contact</p>
<p class="section-content">SECTION 6 = Contact</p>
<p class="section-content">SECTION 6 = Contact</p>
<p class="section-content">SECTION 6 = Contact</p>
</article>
</section>
</div>
<script>
// jQuery on DOM ready
// In-Page Scroll Animation with VelocityJS
// ------------------------------------------------ //
// https://john-dugan.com/fixed-headers-with-hash-links/
$('.menu-a').on('click', function(e) {
var hash = this.hash,
$hash = $(hash)
addHash = function() {
window.location.hash = hash;
};
$hash.velocity("scroll", { duration: 700, easing: [ .4, .21, .35, 1 ], complete: addHash });
e.preventDefault();
});
// ScrollSpy for Menu items and Fragment Identifier
// ------------------------------------------------ //
// https://jsfiddle.net/mekwall/up4nu/
$menuLink = $('.menu-a')
var lastId,
// Anchors corresponding to menu items
scrollItems = $menuLink.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+ 30; // or the value for the #navigation height
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
$menuLink
.parent().removeClass("active")
.end().filter("[href='#"+id+"']").parent().addClass("active");
}
// If supported by the browser we can also update the URL
// http://codepen.io/grayghostvisuals/pen/EtdwL
if (window.history && window.history.replaceState) {
history.replaceState("", document.title,'#'+id);
}
});
</script>
</body>
</html>
@strictlymomo
Copy link
Author

strictlymomo commented Jun 15, 2016 •
edited

@snuggs

did some research, since i also like this scroll-based feature to trigger stuff. try this gist. it works for me. didn't bother replacing jquery ;P

  • URL fragments can be reloaded using Window.location.hash
  • grabbed this code from this stackoverflow thread, which talks about the difference between Window.history.replaceState() vs Window.history.pushState(). Use replaceState() over pushState or else this will happen: "When you scroll a tiny bit on the fiddle and then hit the back button you will see that the scrollbar "travels" the exact same way, remembering the scrolling that was done."
  • don't need it for this use case, but ScrollMagic has neat features.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment