1
У меня есть фиксированная навигационная панель на проекте начальной загрузки и на целевой странице веб-сайта, я сделал фон прозрачной навигационной панели. Когда веб-сайт прокручивается вниз, я хочу, чтобы фон navbar изменился на черный. Я использую bootstrap. Пример того, что я хочу, можно увидеть в nabber по адресу:Как изменить цвет фона навигатора после прокрутки страницы вниз
http://ironsummitmedia.github.io/startbootstrap-agency/
Я новый кодировщик, поэтому прошу прощения за ошибки в форматировании кода.
HTML:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Youth | Society</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="design.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand"><img src="1.png"></a>
</div>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">Who are we</a></li>
<li><a href="#">Volunteer</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</header>
<div class="page1">
<div class="landing">
<div class="container">
<h1>Peel's YES</h1>
<p>Welcome To Peel's Youth Engagement Society</p>
</div>
<div class="topics">
<div>
<div class="row">
<div class="col-md-4">
<h3>Learn</h3>
<p>Get to know more about YES, who we are, and what we do.</p>
</div>
<div class="col-md-4">
<h3>Volunteer</h3>
<p>Find out how you can get involved! YES strives to prove YOUth with unique opportunities and experiences.</p>
</div>
<div class="col-md-4">
<h3>Educate</h3>
<p>Read about the themes that YES has supported in the past</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</DOCTYPE>
CSS:
.navbar-header {
display: inline;
}
.navbar{
background: transparent;
background-color: transparent;
border-color: transparent;
}
@media screen and (max-width: 767px) {
.navbar {
background-color: black;
}
}
.navbar-toggle{
margin-top: -50px;
}
.navbar .nav > li > a {
color: black;
}
@media screen and (max-width: 767px) {
.navbar .nav > li > a {
color:white;
}
}
.navbar {
padding-top:15px;
padding-bottom: 5px;
}
@media screen and (max-width: 767px) {
.navbar {
padding-top:0px;
padding-bottom: 0px;
}
}
.navbar a {
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
}
.navbar li{
font-family: 'Lato', sans-serif;
display: inline;
}
.navbar img {
max-height: 50px;
margin-top: -20px;
}
/* P A G E 1 */
.landing {
padding-top:140px;
background-image:url(mainpage1.JPG);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 760px;
}
.landing h1 {
text-align: center;
color: #000;
font-size: 70px;
font-family: 'Lato', sans-serif;
font-weight: bold;
}
.landing p {
text-align: center;
font-size: 20px;
color: #000;
font-family: 'Lato', sans-serif;
}
.topics{
background: #eeeeee;
padding-right:40px;
margin-top: 340px;
text-align: center;
}
.topics h3{
font-size: 18px;
}
.topics p{
font-size: 18px;
}
/* P A G E 2 */
.page2 {
height:760px;
}
.page2 h3{
text-align: left;
margin-top: 100px;
}
Спасибо за то, что поделили @AngularJR, я угасаю усадочную версию с помощью CSS, но когда я прокручиваю резервную копию, исчезновение не применяется снова. – rwzdoorn