Utilizing Bootstrap affix property to reveal a header after scrolling down by 100px has been successful for me. However, I encountered an issue when trying to set the opacity property to 0.0001, it works as expected. But when setting it to 0 or changing display to none, the functionality ceases. You can view a demonstration where the opacity property is functioning correctly here - http://jsfiddle.net/gu33f5cm/.
The drawback of using opacity is that it still occupies space in the document and makes the section appear blank where the header should be located. Below is the CSS code that I am using:
CSS:
#nav.affix {
position: fixed;
top: 0;
width: 100%;
transition: 0.6s all;
}
#nav.affix-top {
opacity:0.1;
}
HTML:
<div class="container" data-spy="affix" data-offset-top="100" id="nav">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<div class="span12"> <a class="brand" href="#">Home</a>
<ul class="nav">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>