Я хочу получить этот эффект: www.kemtecnia.com Этот веб-сайт имеет фиксированную верхнюю панель, которая сжимается на прокрутке вниз, под карусели фиксированной, которая, кажется, исчезает по содержанию ниже.Навигационная верхняя фиксированная усадка с карусели без перекрытия
Как я могу это сделать в своем коде для его получения?
У меня есть NavBar верх:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Desplegar menú</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="logo" href="index.php">
<img src="img/logo.gif" class="img-responsive" alt="DIESIA Networking Academic Program - UHU" />
</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 navbar-right">
<?php
$i = 0;
foreach($menuItems as $menuItem => $url){
if($i == 0 && (basename($_SERVER['PHP_SELF']) == 'index.php') || (basename($_SERVER['PHP_SELF']) == ''))
echo "<li class='active'>\n";
else
echo "<li>\n";
echo $url . $menuItem . "</a>\n";
echo "</li>\n";
$i++;
}
?>
</ul>
</div>
</div>
, но, кажется, перекрывает мою карусель. Набережная тоже сжимается js. Я хочу, чтобы это не перекрывало мои карусели и карусели, которые исчезают вместе с остальной частью контента, когда прокручиваются.
CSS на панели навигации:
@media(min-width:768px) {
.navbar-fixed-top {
padding: 25px 0;
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}
.navbar-fixed-top .navbar-brand {
font-size: 2em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.navbar-fixed-top.navbar-shrink {
padding: 10px 0;
}
.navbar-fixed-top.navbar-shrink .navbar-brand {
font-size: 1.5em;
}
}
.navbar a:focus {
outline: 0;
}
.navbar .navbar-nav {
letter-spacing: 1px;
}
.navbar .navbar-nav li a:focus {
outline: 0;
}
.navbar-default,
.navbar-inverse {
border: 0;
}
спасибо заранее!
Edit: Codepen здесь: http://codepen.io/jesfer/pen/oLvQYY
Спасибо за ваш ответ. Даже с вашей помощью не работает правильно. Я отредактировал сообщение с codepen. Единственное, что терпит неудачу, - это содержимое ниже, которое не перекрывает ползунок. – Jesfer
все еще не на 100% уверен, что это то, чего вы пытаетесь достичь, взгляните на это, хотя? http://codepen.io/MatthewBryce/pen/KMKXOe?editors=0100 – MatthewBryce
То есть! Большое спасибо за вашу помощь и извините за задержку в моем ответе. – Jesfer