I have successfully minimized my navigation bar once the user scrolls past the header. However, I need advice on handling the line height of the elements as the div shrinks. Additionally, there is an issue where the navigation bar glitches and remains shrunken even when at the top of the page after erratic scrolling. Can anyone help me resolve this? Thank you. index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Quench</title>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/main.js" type="text/javascript"></script>
</head>
<body>
<header id="site-header">
<nav id="main-navigation">
<ul class="soc" >
<li>Home</li>
<li>Specials</li>
<li>Location</li>
<li>Events</li>
<li class="social" style="text-align:center;">
<a class="soc-twitter" href="#"></a><a class="soc-facebook" href="#"></a><a class="soc-pinterest" href="#"></a>
</ul>
</li>
</ul>
</nav>
<div class="logo">
Quench
<span>Satisfying Nightlife</span>
</div>
<div class="fore-glass">
</div>
</header>
<section>
<article>
<header>
<h2>Article Title</h2>
</header>
<p>Today massive amounts of penguins migrated to the warm waters of the Pacific Ocean</p>
</article>
<article>
<header>
<h2>Article Title 2</h2>
</header>
<p>German Sheperd kills man and small child walking in neighborhood park</p>
</article>
</section>
<aside>
<h2>About Section</h2>
<p>Welcome to Quench the greatest site ever known to man</p>
</aside>
<div style="height:2000px"></div>
<footer>
Copyright 2015-2016 Quench.
</footer>
</body>
</html>
style.css
@import url(https://fonts.googleapis.com/css?family=Montserrat);
html, body {
margin:0;
padding:0;
background:#130806;
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
color:#fff;
}
* {
margin:0;
padding:0;
}
img {
max-width:100%;
}
footer {
background:#000;
color:#fff;
}
header#site-header {
background:url(images/bar-background.jpg);
background-size:100% 600px;
background-repeat:no-repeat;
background-attachment:fixed;
color:white;
width:100%;
height:600px;
position:relative;
overflow:hidden;
}
header#site-header .fore-glass {
position:absolute;
background:url(images/bar-glass.png);
background-position: center top;
background-size:25% 100%;
background-repeat:no-repeat;
right:6%;
bottom:10%;
width:50%;
height:70%;
z-index:6;
}
header#site-header .logo {
position:absolute;
top:50%;
left:10%;
color:#fff;
font-size:90px;
font-weight:900;
width:500px;
height:200px;
text-align:center;
margin-top:-100px;
line-height:1;
}
header#site-header .logo span {
font-size:80px;
font-weight:500;
font-style:italic;
opacity:.7;
color:#607927;
}
header#site-header nav#main-navigation {
width:100%;
background:#607927;
height:100px;
font-size:24px;
position:fixed;
z-index:5;
transition : all 100ms ease-in-out;
}
...
<article {
padding:100px 0;
max-width:640px;
margin: 0 auto;
text-align:center;
}
main.js
...Here is the Fiddle link
http://jsfiddle.net/AFTef/1101/
TLDR Looking for advice on how to go about updating line-height of main-navigation as user scrolls past header.
Also, How can I fix the issue where if you use the scroll bar very fast, the header may be minimized when it should be full size?