De multiples supérieure fixe navbar-têtes de Twitter Bootstrap 3

Bootstrap 3.02

Je voudrais avoir 2 fixes à haut navbars similair à la façon de Joomla! 3 met en œuvre son écran browse.

Et puis une fois que vous faites défiler la barre de navigation #2 mégots contre le haut:

J'ai regardé:

mais en essayant plusieurs extraits de code, je ne peux pas obtenir que cela fonctionne. N'importe qui peut aider avec un travail de démonstration dans jsFiddle?

Vous pouvez poster ce que vous avez fatigué jusqu'à présent?

InformationsquelleAutor TheEdge | 2014-02-06

La le code ci-dessous est une base de départ à l'aide de deux navbars et affix.

HTML

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</div><!-- /.container-fluid -->
</nav>
<div class="divide-nav">
<div class="container">
<p class="divide-text">Some Text Here</p>
</div>
</div>
<nav class="navbar navbar-default navbar-lower" role="navigation">
<div class="container">
<div class="collapse navbar-collapse collapse-buttons">
<form class="navbar-form navbar-left" role="search">
<button class="btn btn-success">Button</button>
<button class="btn btn-default">Button</button>
<button class="btn btn-default">Button</button>
<button class="btn btn-default">Button</button>
</form>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="filler"></div>
</div>
</div>

CSS

body{
margin-top: 50px;
}
.divide-nav{
height: 50px;
background-color: #428bca;
}
.divide-text{
color:#fff;
line-height: 20px;
font-size:20px;
padding: 15px 0;
}
.affix {
top: 50px;
width:100%;
}
.filler{
min-height: 2000px;
}
.navbar-form {
padding-left: 0;
}
.navbar-collapse{
padding-left:0; 
}

JavaScript

$('.navbar-lower').affix({
offset: {top: 50}
});

Veuillez considérer l'ajout de contenu sur jsFiddle pour votre réponse, si jsFiddle va en bas de cette réponse, c'est inutile.
J'ai dû ajouter z-index: 1000; à .affix pour vous assurer que le contenu défile en dessous de la deuxième barre de navigation. Autre que cela, fonctionne très bien.
Il ne fonctionne pas, seul le haut de l'en-tête séjours. Pas une réponse valable.
Compte tenu de mon démo fonctionne très bien et le fait que 10 personnes maximum-voter, je parie que le problème est avec votre projet, pas mon code. Avez-vous d'inclure jQuery et Bootstrap fichier Javascript dans votre projet? Les deux sont nécessaires(avant mon bout de code Javascript).
Jquery et bootstrap est là, seul le premier en-tête est fixe. La question est à la fois Premier en-tête et le deuxième en-tête doit être réglé comme Joomla.
les deux navbars SONT fixes (après le défilement 50px, en utilisant le Bootstrap Apposer la fonctionnalité).... regarder le jsFiddle mentionné dans ma réponse.. jsfiddle.net/SchmalzyB/vNecy/4 Évidemment, pour quelque raison que ce soit l'Affixe de la fonctionnalité ne fonctionne pas dans votre projet, mais mon exemple fonctionne.
Il ne travaille pas dans JSFiddle ainsi. Je suis en utilisant le Navigateur google Chrome, la Version 39.0.2171.71 m sur CentOS machine. Seul le premier en-tête est fixe. "Texte Ici" contenu défile, qui ne devrait pas.
Le "Texte Ici" est équivalent au "Gestionnaire de catégories: les Articles de la section" au sein de la Fpo captures d'écran ci-dessus, qui est censé pour faire défiler (son parti dans la 2ème capture d'écran), c'est la seconde barre de navigation ci-dessous le "Texte Ici" section qui devient fixe après le défilement 50px. De toute façon, je vous, je ne pense pas que vous comprenez la question d'origine, ou sa ne marche pas sur votre machine, pour une raison ou une autre.
C'est une excellente réponse. Comment dois-je aller sur l'ajout d'un soutien adapté à la sous navbars?

InformationsquelleAutor Schmalzy

-1

HTML:

<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file://-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>body { padding-top: 70px; }</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
Top Nav
</div>
</nav>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<img src="Desert.jpg" style="width: 100%; height: auto;">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body></html>

Lien vidéo

youtu.être/kc4ST9rFxz0

InformationsquelleAutor anupammondal.in

-1

Try this :
<div class="navbar navbar-fixed-top">
<nav class="navbar navbar-default>
navbar1
</nav>
<nav class="navbar navbar-default">
navbar2
</nav>
</div>

Ce code fonctionne pour l'u.Mais quand boostrap4 libération, je pense que de son mieux pour l'utiliser.

InformationsquelleAutor armin

Vous devez vous connecter pour publier un commentaire.