css - horizontal - navbar bootstrap example
¿Cómo usar el nuevo complemento de affix en bootstrap de arranque 2.1.0? (9)
Acabo de implementar esto por primera vez, y esto es lo que he encontrado.
El valor data-offset-top es la cantidad de píxeles que debe desplazarse para que se produzca el efecto de fijación. En su caso, una vez que se desplaza 50px , la clase de su elemento cambia de .affix-top a .affix . Probablemente desees establecer data-offset-top en 130px en tu caso de uso.
Una vez que se produzca este cambio de clase, debe colocar su elemento en CSS mediante el diseño del posicionamiento de la clase .affix . Bootstrap 2.1 ya define .affix como position: fixed; entonces todo lo que necesita hacer es agregar sus propios valores de posición.
Ejemplo:
.affix {
position: fixed;
top: 20px;
left: 0px;
}
La documentación de arranque sobre ese tema es un poco confusa para mí. Quiero lograr un comportamiento similar al de los documentos con la barra de navegación de afijos: la barra de navegación está debajo de un encabezado de párrafo / página, y al desplazarse hacia abajo primero debe desplazarse hasta llegar a la parte superior de la página y luego permanecer fijo para más desplazamientos .
Como jsFiddle no funciona con el concepto de la barra de navegación, he configurado una página separada para el uso como un ejemplo mínimo: http://i08fs1.ira.uka.de/~s_drr/navbar.html
Yo uso esto como mi barra de navegación:
<div class="navbar affix-top" data-spy="affix" data-offset-top="50">
<div class="navbar-inner">
<div class="container">
<div class="span12">
<a class="brand" href="#">My Brand</a>
This is my navbar.
</div>
</div> <!-- container -->
</div> <!-- navbar-inner -->
</div> <!-- navbar -->
Creo que me gustaría que data-offset-top tuviera valor 0 (ya que la barra debería "pegarse" a la parte superior "pero con 50 hay al menos algún efecto que se puede ver).
Si también colocaste el código de javascript en su lugar:
<script>
$(document).ready (function (){
$(".navbar").affix ();
});
</script>
Cualquier ayuda apreciada.
De forma similar a la respuesta aceptada, también puede hacer algo como lo siguiente para hacer todo de una vez:
$(''#nav'').affix({
offset: { top: $(''#nav'').offset().top }
}).wrap(function() {
return $(''<div></div>'', {
height: $(this).outerHeight()
});
});
Esto no solo invoca el complemento de affix , sino que también envuelve el elemento fijo en un div que mantendrá la altura original de la barra de navegación.
Debes eliminar .affix() de tu script.
Bootstrap ofrece la opción de lograr cosas a través data-attributes o JavaScript directo la mayor parte del tiempo.
Estaba teniendo un problema similar y creo que encontré una solución mejorada.
No se moleste en especificar data-offset-top en su HTML. En su lugar, especifíquelo cuando llame a .affix() :
$(''#nav'').affix({
offset: { top: $(''#nav'').offset().top }
});
La ventaja aquí es que puede cambiar el diseño de su sitio sin necesidad de actualizar el atributo data-offset-top . Dado que esto utiliza la posición calculada real del elemento, también evita las incoherencias con los navegadores que hacen que el elemento se encuentre en una posición ligeramente diferente.
Todavía tendrá que sujetar el elemento a la parte superior con CSS. Además, tuve que establecer el width: 100% en el elemento nav ya que los elementos .nav con position: fixed mal por alguna razón:
#nav.affix {
position: fixed;
top: 0px;
width: 100%;
}
Una última cosa: cuando un elemento fijo se vuelve fijo, su elemento ya no ocupa espacio en la página, lo que hace que los elementos debajo de él "salten". Para evitar esta fealdad, envuelvo la barra de navegación en un div cuya altura configuro para que sea igual a la barra de navegación en tiempo de ejecución:
<div id="nav-wrapper">
<div id="nav" class="navbar">
<!-- ... -->
</div>
</div>
.
$(''#nav-wrapper'').height($("#nav").height());
Gracias a namuol y Dave Kiss por la solución. En mi caso, tuve un pequeño problema con la altura y el ancho de la barra de navegación cuando utilicé afflix y colapsé complementos juntos. El problema con el ancho se puede resolver fácilmente heredándolo del elemento principal (contenedor en mi caso). También pude lograr que se colapse sin problemas con un poco de javascript (coffeescript en realidad). El truco consiste en establecer la altura de la envoltura en auto antes de que ocurra la contracción al colapso y repararla nuevamente después.
Marcado (haml):
#wrapper
#navbar.navbar
.navbar-inner
%a.btn.btn-navbar.btn-collapse
%span.icon-bar
%span.icon-bar
%span.icon-bar
#menu.nav-collapse
-# Menu goes here
CSS:
#wrapper {
width: inherit;
}
#navbar {
&.affix {
top: 0;
width: inherit;
}
}
Coffeescript:
class Navigation
@initialize: ->
@navbar = $(''#navbar'')
@menu = $(''#menu'')
@wrapper = $(''#wrapper'')
@navbar.affix({offset: @navbar.position()})
@adjustWrapperHeight(@navbar.height())
@navbar.find(''a.btn-collapse'').on ''click'', () => @collapse()
@menu.on ''shown'', () => @adjustWrapperHeight(@navbar.height())
@menu.on ''hidden'', () => @adjustWrapperHeight(@navbar.height())
@collapse: ->
@adjustWrapperHeight("auto")
@menu.collapse(''toggle'')
@adjustWrapperHeight: (height) ->
@wrapper.css("height", height)
$ ->
Navigation.initialize()
Lo obtuve del código fuente de twitterbootstrap y está funcionando bastante bien:
HTML:
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul id="navbar" class="nav nav-list bs-docs-sidenav">
...
</ul>
</div>
</div>
CSS:
.bs-docs-sidenav {
max-height: 340px;
overflow-y: scroll;
}
.affix {
position: fixed;
top: 50px;
width: 240px;
}
JS:
$(document).ready(function(){
var $window = $(window);
setTimeout(function () {
$(''.bs-docs-sidenav'').affix({
offset: {
top: function (){
return $window.width() <= 980 ? 290 : 210
}
}
})
}, 100);
});
Mi solución para unir la barra de navegación:
function affixnolag(){
$navbar = $(''#navbar'');
if($navbar.length < 1)
return false;
h_obj = $navbar.height();
$navbar
.on(''affixed'', function(){
$navbar.after(''<div id="nvfix_tmp" style="height:''+h_obj+''px">'');
})
.on(''unaffixed'', function(){
if($(''#nvfix_tmp'').length > 0)
$(''#nvfix_tmp'').remove();
});
}
Para solucionar este problema, he modificado el complemento de afijo para que emita un evento jQuery cuando un objeto está adherido o no.
Aquí está la solicitud de extracción: https://github.com/twitter/bootstrap/pull/4712
Y el código: https://github.com/corbinu/bootstrap/blob/master/js/bootstrap-affix.js
Y luego haz esto para unir la barra de navegación:
<script type="text/javascript">
$(function(){
$(''#navbar'').on(''affixed'', function () {
$(''#navbar'').addClass(''navbar-fixed-top'')
});
$(''#navbar'').on(''unaffixed'', function () {
$(''#navbar'').removeClass(''navbar-fixed-top'')
});
});
</script>
Solo necesita eliminar el script. Aquí está mi ejemplo:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<style>
#content {
width: 800px;
height: 2000px;
background: #f5f5f5;
margin: 0 auto;
}
.menu {
background: #ccc;
width: 200px;
height: 400px;
float: left;
}
.affix {
position: fixed;
top: 20px;
left: auto;
right: auto;
}
</style>
</head>
<body>
<div id="content">
<div style="height: 200px"></div>
<div class="affix-top" data-spy="affix" data-offset-top="180">
<div class="menu">AFFIX BAR</div>
</div>
</div>
</body>
</html>