Skip to content

Instantly share code, notes, and snippets.

@rockchalkwushock

rockchalkwushock/index.html

Created November 30, 2017 21:38
Show Gist options
  • Save rockchalkwushock/dd71b7c4e851e4e660e5e94981b11156 to your computer and use it in GitHub Desktop.
Save rockchalkwushock/dd71b7c4e851e4e660e5e94981b11156 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{ .Site.Title }}</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/evil-icons/1.9.0/evil-icons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Handlee|Kalam">
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/style.css">
</head>
<body>
<div class="parallax img1">
<div class="ptext">
<span class="border">
RCWS Development
</span>
</div>
</div>
<header> <!-- initially set to display: none -->
<nav class="menu">
<a class="menu-links" href="">Home</a>
<a class="menu-links" href="">Blog</a>
<a class="menu-links" href="">Projects</a>
</nav>
</header>
<main>
<section class="intro">
<p>Hello and welcome to my little slice of the inter-web!</p>
<br>
<p>
I am Cody Brunner, a full stack JavaScript web developer currently residing in Wichita, Kansas.
</p>
<br>
</section>
</main>
<footer class="grid">
<div class="contact">
{{ range $key, $val := .Site.Social }}
<a href="{{ $val }}">
<div data-icon="ei-sc-{{ $key }}" aria-hidden="true"></div>
</a>
{{ end }}
</div>
<div class="copyright">
<a class='copyright' href="https://rcws-development.com">
{{ $year := now.Format "2006" }}
{{ if eq $year "2017" }}
©2017 RCWS Development
{{ else }}
© 2017-{{ $year }} RCWS Development
{{ end }}
</a>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/evil-icons/1.9.0/evil-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>
const offsetHeight = $('.parallax').height() // Get the height of the parallax
console.log(offsetHeight)
function toggleHeader() {
console.log(window.pageYOffset)
if (window.pageYOffset > offsetHeight) {
// When the pageYOffset is greater than the parallax height show the header.
$('header').show()
} else if (window.pageYOffset < offsetHeight) {
// and hide in the reverse case.
$('header').hide()
}
}
$(window).scroll(toggleHeader)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment