After spending some time researching and following tutorials, I have not made much progress with my goal. The task at hand is to hide the top header of my website when the user scrolls down and then make it reappear when they scroll back up to the top of the page.
Here's the code I've been working on:
<header class="top-nav">
<div class="top-nav">
<!-- Top Row -->
<div class="top">
<div class="container">
<div class="row vh-center">
<div class="col-md-5 slogan">
Plumbing and Remodelling Services.
</div>
<div class="col-md-2">
<a href="index.html">
<img src="img/logo.png" alt="logo" class="logo">
</a>
</div>
<div class="col-md-5 top-social right">
<div class="social-3 right">
<a href="index.html#"><i class="icon-facebook"></i></a>
<a href="index.html#"><i class="icon-dribbble"></i></a>
<a href="index.html#"><i class="icon-twitter"></i></a>
<a href="index.html#"><i class="icon-tumblr"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- Top Row End -->
<script type="text/javascript">
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
if(Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop && st > navbarHeight){
$('header').removeClass('top-nav').addClass('nav-up');
} else {
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('top-nav');
}
}
lastScrollTop = st;
}
</script>
</div>
</header>
<header id="home">
<!-- Navigation -->
<div class="navigation">
<div class="container">
<div class="row vh-center">
<ul class="nav" id="nav">
<li>
<a href="index.html#home" title="About">
<span>About</span>
</a>
</li>
<li>
<a href="http://www.terrylove.com/forums/index.php" title="Forums" target='_blank'>
<span>Forums</span>
</a>
</li>
<li>
<a href="index.html#event" title="Something">
<span>Renovations?</span>
</a>
</li>
<li>
<a href="index.html#portfolio" title="Something">
<span>Plumbing?</span>
</a>
</li>
<li>
<a href="index.html#team" title="Something">
<span>Stories?</span>
</a>
</li>
<li>
<a href="index.html#blog" title="Something">
<span>Pricing</span>
</a>
</li>
<li>
<a href="index.html#contact" title="Contact">
<span>Contact</span>
</a>
</li>
</ul>
<select class="select-menu"></select>
</div>
</div>
</div>
</header>
CSS Section:
header {
margin:0px auto;
text-align:center;
position:fixed;
width: 100%;
top:0;
z-index:999;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
float:left;
background: #34373d;
transition: top 0.2s ease-in-out;
}
.nav-up {
top: -40px;
}
Even though I have specified a scroll behavior for the headers in my code, they remain fixed without any effect upon scrolling. If anyone could provide guidance on what might be causing this issue and how to address it, I would greatly appreciate it.