Image over Bootstrap NavBar, fading out when scrolling - css

Question

I am looking for a solution for the following scenario. I am using the Bootstrap NavBar. Further I managed to display a full-width image on top of the NavBar, see the screenshot below.
On the left hand side there normally is another figure. See this JsFiddle for both the HTML and CSS code, the following listing provides an excerpt of the relevant code.
#header {
width: 100%;
background-image: url(http://s23.postimg.org/9ym003hd7/headbg.png);
background-repeat: repeat-x;
height: 185px;
position: fixed;
}
#header img {
margin-top: 20px;
margin-left: 20px;
}
.navbar-fixed-top {
top: 140px;
padding-right: 20px;
}
.wrap > .container {
padding: 210px 15px 20px;
}
I want the following behaviour: When the content is long enough, scrolling down should move both NavBar and header upwards, such that the header eventually is hidden. The NavBar however should stay at the top of the page, even if the content of the page longer. It this possible?

Answer 1

You can use Bootstraps Affix.js for this. You don't need to fix your navbar for this so it's been removed as well as the position of the header itself.
Just add the data attributes to your navbar and the affix class in your CSS for your height requirement.
See working example Snippet.
#header {
background-image: url(http://placehold.it/185x185/f00/fff);
background-repeat: repeat-x;
height: 185px;
}
.navbar.affix {
width: 100%;
margin-top: -185px;
}
/* Breadcrumps */
.kras-breadcrumb {
list-style: outside none none;
font-size: 1.3em;
font-weight: bold;
margin-bottom: 0;
}
.kras-breadcrumb > li {
display: inline;
vertical-align: middle;
line-height: 50px;
}
.kras-breadcrumb > li + li::before {
color: #ff0000;
content: "\2022 ";
padding: 0 6px;
}
.kras-breadcrumb > .active {
color: #FFFFFF;
}
.kras-breadcrumb li a {
color: #FFFFFF;
}
/* Login form in NavBar */
.navbar input {
height: 20px;
padding: 0;
}
.form-inline .form-control {
width: 110px;
}
.navbar-kras-login {
margin-top: 11px;
margin-bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="header"></div>
<nav id="w1" class="navbar-inverse navbar-static-top navbar" role="navigation" data-spy="affix" data-offset-top="185">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w1-collapse"><span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="w1-collapse" class="collapse navbar-collapse">
<ul class="kras-breadcrumb navbar-left">
<li>MySite
</li>
<li class="active">Welcome Page</li>
</ul>
<ul id="w2" class="navbar-nav navbar-right nav">
<li>
<div class="navbar-text pull-right navbar-kras-login">
<form id="w0" class="form-inline" action="/" method="post" role="form">
<input type="hidden" name="_csrf" value="UGdBNWh2SFcyL3hmGxkHNhI/CUACGB01PDITdzckJWclP3h5LhohYw==">
<div class="form-group field-loginform-username required">
<label class="sr-only" for="loginform-username">Username</label>
<input type="text" id="loginform-username" class="form-control" name="LoginForm[username]" placeholder="Username">
</div>
<div class="form-group field-loginform-password required">
<label class="sr-only" for="loginform-password">Password</label>
<input type="password" id="loginform-password" class="form-control" name="LoginForm[password]" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary btn-xs">Login</button>
</form>
</div>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="site-index">
<div class="jumbotron">
<h1>Congratulations!</h1>
<p class="lead">You have successfully created your Yii-powered application.</p>
<p><a class="btn btn-lg btn-success" href="http://www.yiiframework.com">Get started with Yii</a>
</p>
</div>
<div class="body-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
</div>