twitter-bootstrap
Afijo Bootstrap
Buscar..
En 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>
Ejemplo de afijo 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
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow