0
У меня есть навигационная панель, которая фиксируется сверху, после того как пользователь прокручивает страницу вниз. Проблема в том, что navbar находится за содержимым, как показано на изображении ниже. После прокрутки я добавляю класс в navbar '.scrolled'. БлагодаряBootstrap navbar фиксированный на прокрутке, перекрываемом контентом
.land-header-cont {
img {
position: absolute;
top: 0;
left: 0;
opacity: 0.15;
}
nav {
transition: all 0.1s ease-in-out;
@media screen and (min-width: 768px){
padding-top: 50px;
}
background-color: transparent;
border-radius: 0;
font-family: 'Raleway' , 'Roboto', sans-serif !important;
.remotey-left {
.remotey-text {
font-size: 1.5em;
}
i {
font-size: 1.5em;
&.white-bg {
color: #22262F;
background-color: #f0f0f0;
padding-bottom: 2px;
padding-left: 3px;
padding-right: 2px;
border-radius: 3px;
margin-right: 3px;
}
&.small {
font-size: 1.1em;
margin-right: 5px;
}
}
a {
padding-top: 5px;
}
}
.navbar-nav {
li {
a {
color: white;
}
&:hover {
a {
color: #bb77ff;
font-size: bold;
}
}
}
.btn-transparent {
margin-top: -7px;
height: 35px;
width: 100%;
padding-top: 7px;
&.pink {
border-color: #bb77ff;
color: #bb77ff;
&:hover {
background-color: #bb77ff;
color: white;
}
}
}
}
&.scrolled {
position: fixed;
top: 0;
z-index: 9999999;
padding-top: 10px;
background-color: white;
border-bottom: 1px solid #CCCCCC;
li {
a {
color: #202020
}
}
min-height: 65px !important;
margin-bottom: 0;
.remotey-left {
margin-top: 7px;
}
.land-content {
padding-top: 80px;
}
}
}
min-height: 70vh;
position: relative;
background-color: #22262F;
opacity: 0.9;
overflow: hidden;
padding: 0;
.content-header {
text-align: center;
color: white;
h1 {
letter-spacing: 0.05em;
.pink {
color: #bb77ff;
}
}
.full {
border-color: #bb77ff;
background-color: #bb77ff;
color: white;
@media screen and (min-width: 768px) {
width: 20%;
}
padding: 6px;
height: 35px;
}
.bottom-arrow {
border: 1px solid #CCCCCC;
border-radius: 50%;
width: 70px;
height: 70px;
margin: 50px auto;
}
}
}
.land-content {
background-color: white;
img {
z-index: -1;
}
}<body class="fixed-nav">
<div class="container-fluid land-header-cont">
<img src="img/landing_header_bg.jpg" class="">
<!--<div class="content">-->
<nav class="navbar navbar-default navbar-fixed-top">
<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>
</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 remotey-left hidden-xs">
<li><a href="#"><i class="icon-rlogo white-bg"></i><span class="remotey-text">remotey</span> </a></li>
<li><a href="#"><i class="icon-facebook-counter small"></i><span class="">Share</span> </a></li>
<li><a href="#"><i class="icon-twitter-counter small"></i><span class="">Tweet</span> </a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">VACANCIES</a></li>
<li><a href="#">TASKS</a></li>
<li><a href="#">ENTERPRISE</a></li>
<li><a href="#">POST JOB</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="login.html">LOGIN</a></li>
<li><a href="signup.html"><div class="btn btn-transparent pink">SIGN UP FOR FREE</div> </a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!--</div>-->
<div class="container content-header content" style="padding-top: 200px;">
<h1>Find your new <span class="pink">remote job</span> with Remotey</h1>
<h4 style="padding-top: 50px; letter-spacing: 0.05em; font-weight: 100">The marketplace where anything is possible</h4>
<a href="#"><div class="btn btn-transparent pink full">GET STARTED - FREE!</div></a>
<a href="#">
<div class="bottom-arrow">
<i class="icon-arrowdown-2x"></i>
</div>
</a>
</div>
</div>
<div class="container-fluid land-content">
<div class="col-xs-12 col-md-6">
<h3>Remote vacancies from all around the world</h3>
</div>
<div class="col-xs-12 col-md-6">
<img src="img/l1.jpg" class="img-responsive">
</div>
</div>
<div class="container-fluid land-content">
<div class="col-xs-12 col-md-6">
<h3>Remote vacancies from all around the world</h3>
</div>
<div class="col-xs-12 col-md-6">
<img src="img/l1.jpg" class="img-responsive">
</div>
</div>
<div class="container-fluid land-content">
<div class="col-xs-12 col-md-6">
<h3>Remote vacancies from all around the world</h3>
</div>
<div class="col-xs-12 col-md-6">
<img src="img/l1.jpg" class="img-responsive">
</div>
</div>
<script src="./js/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="./js/bootstrap-datepicker.js"></script>
<script src="./js/material.js"></script>
<script src="./js/ripples.js"></script>
<script src="./js/jquery.dropdown.js"></script>
<script src="./js/main_index.js"></script>
<script>
$(document).ready(function(){
$.material.init();
var header_h = $('.land-header-cont').outerHeight();
console.log(header_h);
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
if (scroll > header_h) {
$('.navbar-default').addClass('scrolled');
$('.land-content').css('padding-top','80px');
} else {
if ($('.navbar-default').hasClass('scrolled')) {
$('.navbar-default').removeClass('scrolled');
}
}
});
});
</script>
</body>
Проблема в том, что небольшой индекс z для содержимого (например, -3) не работает, даже если navbar имеет массивный z-индекс, такой как 1300 – DavidN