Я пытаюсь заставить мою навигационную панель иметь белый фон, как только пользователь прокручивает веб-сайт. Но по какой-то причине я не уверен, как заставить белый фон появляться на панели навигации, а мой продолжает исчезать, как только я прокручиваю
Таким образом, моя панель навигации выглядит нормально, без фона в верхней части страницы. Тогда мне нужно, как только пользователь прокручивает страницу вниз, она должна просто прилипать к верхней части экрана с белым фоном над ней.
Примерно так: Пример
Но, очевидно, у меня уже настроена панель навигации, мне просто нужно, чтобы появился фон
<body>
<div class="parallax">
<div class ="logo">
<img src="Images/logo1.fw.png">
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 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>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Timetable</a></li>
<li><a href="#">Prices</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Belt Rankings</a></li>
<li><a href="#">Blog</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Classes </a>
<ul class="dropdown-menu">
<li><a href="#">Brazilian Jiu Jitsu</a></li>
<li><a href="#">Wrestling</a></li>
<li><a href="#">Boxing</a></li>
<li><a href="#">Yoga</a></li>
<li><a href="#">Women Self-Defence</a></li>
<li><a href="#">Treatments</a></li>
<li><a href="#">Kids</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
<div class="container">
</div>
</div>
<div class="parallax1">
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<script>
$(document).ready(function(){
// hide .navbar first
$(".navbar").show();
// fade in .navbar
$(function () {
$(window).scroll(function () {
$('.navbar-default').css({
backgroundColor: $(this).scrollTop() > 100 ?
'white':
'transparent'
})
});
});
});
</script>
</body>
CSS:
body {
font-family: 'Open Sans', sans-serif, Arial;
font-size: 16px;
color: #6D6D6D;
background-color: #F5F5F5;
font-weight: 300;
}
h1,h2,h3,h4,h5,h6 {
font-family: 'Montserrat', sans-serif, Arial;
padding-bottom: 5px;
color: #373432;
line-height: 1em;
font-weight: normal;
}
a {
text-decoration: none;
outline: none;
}
.parallax {
background-image: url("../Images/back1.jpg");
min-height: 1000px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
}
.parallax1 {
min-height: 1000px;
}
.logo {
float: left;
padding-top: 50px;
padding-left: 40px;
}
.logo h1 {
text-transform: uppercase;
font-weight: 900;
font-size: 60px;
letter-spacing: -5px;
line-height: 50px;
color: white;
}
.navbar-nav>li>a {
line-height: 6px;
}
.navbar {
float: right;
padding-top: 50px;
padding-right: 60px;
font-size: 13px;
text-transform: uppercase;
}
.navbar-default {
background-color: transparent;
border-top: 0px solid rgba(0, 0, 0, 0.5);
border-bottom: 0px solid rgba(0, 0, 0, 0.5);
border-left: 0px solid rgba(0, 0, 0, 0.5);
border-right: 0px solid rgba(0, 0, 0, 0.5);
-webkit-transition: background-color 200ms linear;
-moz-transition: background-color 200ms linear;
-o-transition: background-color 200ms linear;
-ms-transition: background-color 200ms linear;
transition: background-color 200ms linear;
}
.navbar-default .navbar-nav>li>a {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
background-color: #F8BD23;
text-decoration: none;
color: #ffffff;
-webkit-transition: background-color 200ms linear;
-moz-transition: background-color 200ms linear;
-o-transition: background-color 200ms linear;
-ms-transition: background-color 200ms linear;
transition: background-color 200ms linear;
}
.navbar-nav > li{
padding-left:30px;
}
.container {
width:100%;
height:100%;
display:flex;
justify-content:center;
flex-direction: column;
align-items: center;
}
overflow-y
ваших элементовbody
илиhtml
? Если это так, это мешает Chrome получить точное значениеscrollTop()
— оно всегда равно нулю. Я боролся с этим несколько раз, прежде чем обнаружил причину. - person arbuthnott   schedule 28.07.2017