0
Ich habe eine Navigationsleiste, die nach dem Scrollen auf der Seite nach oben fixiert ist. Das Problem ist, dass die Navigationsleiste sich hinter dem Inhalt befindet, wie auf dem Bild unten zu sehen ist. Nach dem Bildlauf füge ich der Navigationsleiste '.scrolled' eine Klasse hinzu. DankBootstrap navbar auf der Rolle fixiert durch den Inhalt überlappt
.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>
das ist das Problem, dass ein kleiner Z-Index auf den Inhalt (wie -3) nicht funktioniert, auch wenn die Navbar einen massiven Z-Index wie 1300 hat – DavidN