twitter-bootstrap
Bootstrap Affix
Ricerca…
Su Navbar
html:
<nav class="navbar navbar-defalt" data-offset-top="120" data-spy="affix" >
...
</nav>
Css:
<style>
.navbar {
background-color: red;
}
.navbar.affix {
background-color: green;
}
</style>
Affisso Esempio 2
<div class="container" id="con">
<div class="row">
<div class="span12">
<div class="well">
<h1> Header </h1>
</div>
</div>
</div>
</div>
<div class="container" data-spy="affix" data-offset-top="400" 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>
</div>
<div class="container">
<div class="span3">
<p style="height:1000px;padding:10px;">
Long scrolling text here... Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo.
</p>
</div>
</div>
<style>
#con .well {
height:400px;
}
#nav.affix {
position: fixed;
top: 0;
width: 100%
}
</style>
<script>
$('#nav').affix();
</script
Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow