1
Я пытаюсь сделать две навигационные панели с помощью Bootstrap, и я не могу найти здесь ответы на ответы (хотя некоторые из них уже ответили). То, что у меня есть, «почти» работает, но вторая «панель навигации» всегда скрывается, когда я прокручиваю вниз, и я хочу, чтобы он оставался прямо перед (и уложенным) первым (черным) с тем же эффектом и немного меньшим (в высоту).Две навигационные панели в Bootstrap
У меня есть что-то работает here ... в любом случае я отправляю исходный код также:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<title>Bootstrap - Two Navigation Bars</title>
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<!-- endbower -->
<!-- endbuild -->
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<!--<link rel="apple-touch-icon" href="apple-touch-icon.png">-->
<link rel="shortcut icon" href="favicon.ico">
</head>
<body data-spy="scroll" data-offset="75">
<!--[if lt IE 10]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">
upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<nav class="navbar navbar-inverse navbar-fixed-top" data-offset-top="80" data-spy="affix">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-target="#top-navbar" data-toggle="collapse"
aria-expanded="false" aria-controls="navbar">
<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="#">Project Name</a>
</div>
<div id="top-navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Help</a></li>
</ul>
</div>
</div>
</nav>
<div class="navbar navbar-default navbar-static-top fixed-element">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".main-nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse main-nav">
<ul class="nav navbar-nav">
<li><a href="#">One</a></li>
<li class="divider-vertical"></li>
<li><a href="#about">Two</a></li>
<li class="divider-vertical"></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="jumbotron">
<h1>'Allo, 'Allo!</h1>
<p class="lead">Always a pleasure scaffolding your apps</p>
<p><a class="btn btn-lg btn-success" href="index.html">Splendid!</a></p>
</div>
<div class="row marketing">
<div class="col-lg-6">
<h4>HTML5 Boilerplate</h4>
<p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.</p>
<h4>Bootstrap</h4>
<p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
</div>
<div class="col-lg-6">
<h4>HTML5 Boilerplate</h4>
<p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.</p>
<h4>Bootstrap</h4>
<p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
</div>
<div class="col-lg-6">
<h4>HTML5 Boilerplate</h4>
<p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.</p>
<h4>Bootstrap</h4>
<p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
</div>
</div>
<hr />
<footer class="text-center">
<p>Made with ♥ from the //shido.io team</p>
</footer>
</div>
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js scripts/plugins.js -->
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- endbuild -->
<!-- build:js scripts/main.js -->
<!--<script src="scripts/main.js"></script>-->
<script>
$(document).ready(function() {
$('a.page-scroll').bind('click', function (e) { // Ease page scrolling
var anchor = $(this);
e.preventDefault();
$('html, body').stop().animate({
scrollTop: $(anchor.attr('href')).offset().top
}, 800, 'swing');
});
});
</script>
<!-- endbuild -->
</body>
</html>
... и CSS:
.affix {
padding: 0;
-webkit-transition: padding 0.4s linear;
-moz-transition: padding 0.4s linear;
-o-transition: padding 0.4s linear;
transition: padding 0.4s linear;
}
.affix-top {
padding-top: 6px;
padding-bottom: 6px;
-webkit-transition: padding 0.3s linear;
-moz-transition: padding 0.3s linear;
-o-transition: padding 0.3s linear;
transition: padding 0.3s linear;
}
.browserupgrade {
margin: 0.2em 0;
background: #cccccc;
color: #000000;
padding: 0.2em 0;
}
.container-narrow > hr { margin: 30px 0; }
.dialog {
bottom: auto;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
padding: 5px 10px 8px;
width: 600px; /*60%*/
resize: both;
}
.footer {
padding-top: 19px;
color: #777777;
border-top: 1px solid #e5e5e5;
}
.footer, .header, .marketing {
padding-left: 15px;
padding-right: 15px;
}
.header {
border-bottom: 1px solid #e5e5e5;
}
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 40px;
padding-bottom: 19px;
}
.jumbotron {
text-align: center;
border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
font-size: 21px;
padding: 14px 24px;
}
.marketing { margin: 40px 0; }
.marketing p + h4 { margin-top: 28px; }
.modal-backdrop { background: none; }
.modal-header, .modal-footer { cursor: move; }
.navbar-fixed-top {
border-bottom: solid 1px #c6cacd;
background: rgba(0, 0, 0, 0.9);
box-shadow: 0 1px 4px rgba(49, 49, 64, 0.1);
}
.opener { }
.scrollable-section {
max-height: 100% /*px*/;
overflow-y: scroll;
}
@media screen and (min-width: 768px) {
.container { max-width: 730px; }
.header { margin-bottom: 30px; }
.header, .marketing, .footer {
padding-left: 0;
padding-right: 0;
}
.jumbotron { border-bottom: 0; }
}
body {
padding-top: 80px;
padding-bottom: 20px;
}
/* === */
.fixed-element {
border-bottom: solid 1px #c6cacd;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 1px 4px rgba(49, 49, 64, 0.1);
}
Пожалуйста, дайте мне знать, что отсутствует; Я думаю, что проблема в селекторе .fixed-element. Заранее спасибо!
Man, вы потрясающе! Я не мог добраться до этих деталей! Благодаря! –
@ ɐuıɥɔɐɯ haha рад, что я мог бы помочь Machina –