I am trying to emulate the brilliant sagmeisterwalsh.com site but using Bootstrap navbar with accordion and jquery to trigger the navbar to slide to the top.
All is working well but I can't get the navbar to stick to the bottom of the browser when first rendered by the browser. I have the full browser image above the navbar that collapses (as per the sagmesister webcam feed).
I have tried to set the navbar with a position tag in css but this does not release to the top when triggered (obviously). Any ideas please. I suspect there is likely to be a simple javascript fix.
I am a lowly frontend designer so any explanation will have to be down to my limited understanding. Apologies.
This is what I made (Edited):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Navbar Fix Footer to Header</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#header-img {
background: url("./images/dark.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.navbar.affix {
top: 0;
width: 100%;
}
</style>
<script>
$(document).ready(function () {
$("a").on('click', function (event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function () {
window.location.hash = hash;
});
}
});
});
</script>
</head>
<body>
<div id="header-img"></div>
<nav class="navbar navbar-inverse" data-spy="affix" id="affix-navbar" data-offset-top="1000">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#somewhere1">Somewhere1</a></li>
<li><a href="#somewhere2">Somewhere2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
<h1>this is dummy text just for scrolling</h1>
<h1>this is dummy text just for scrolling</h1>
<h1>this is dummy text just for scrolling</h1>
<h1>this is dummy text just for scrolling</h1>
<h1>this is dummy text just for scrolling</h1>
<h1>this is dummy text just for scrolling</h1>
<h1>this is dummy text just for scrolling</h1>
<h1>this is dummy text just for scrolling</h1>
<h1>this is dummy text just for scrolling</h1>
<h1>this is dummy text just for scrolling</h1>
<h1>this is dummy text just for scrolling</h1>
<h1>this is dummy text just for scrolling</h1>
<h1>this is dummy text just for scrolling</h1>
<h1>this is dummy text just for scrolling</h1>
<h1>this is dummy text just for scrolling</h1>
<h1>this is dummy text just for scrolling</h1>
<h1>this is dummy text just for scrolling</h1>
<h1 id="somewhere1">Somewhere1</h1>
<h1>Somewhere1</h1>
<h1>this is dummy text just for scrolling</h1>
<h1>this is dummy text just for scrolling</h1>
<h1>this is dummy text just for scrolling</h1>
<h1>this is dummy text just for scrolling</h1>
<h1>this is dummy text just for scrolling</h1>
<h1>this is dummy text just for scrolling</h1>
<h1>this is dummy text just for scrolling</h1>
<h1>this is dummy text just for scrolling</h1>
<h1 id="somewhere2">Somewhere2</h1>
<h1>this is dummy text just for scrolling</h1>
<h1>this is dummy text just for scrolling</h1>
<h1>this is dummy text just for scrolling</h1>
<h1>this is dummy text just for scrolling</h1>
<h1>this is dummy text just for scrolling</h1>
<h1>this is dummy text just for scrolling</h1>
<script>
let height = window.innerHeight - 50;
let headerImg = document.getElementById("header-img");
headerImg.style.height = height + "px";
let nav = document.getElementById("affix-navbar");
nav.setAttribute("data-offset-top", height);
</script>
</body>
</html>
I hope this would fix your problem.