Bootstrap Affix Navbar

Bootstrap Affix Navbar after content scrolled past hero unit.

by Doeke Wartena

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://rawgit.com/twbs/bootstrap/master/js/affix.js"></script>
<div>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
</div>
<div class="container" data-spy="affix" data-offset-top="400" id="foo">
  <div>
  foobar
  </div>
</div>
<div>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu vwxyz<br/>
abc def ghij kl mno pqrs tu...

CSS

#foo.affix {
  top: 20px;
  color: red;
  position: fixed;
}

JavaScript

//$('#foo').affix({offset: {top: 150} });