Bootstrap Scroll Down Header Background

Здравствуйте, я попытался найти помощь с других сайтов и руководств по кодированию, но я не нашел тот, который я искал. В основном, мне нужно только то, что как только я прокручусь мимо моей карусели, мой навигатор получит цвет заголовка фона. Благодарю.Bootstrap Scroll Down Header Background

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" href="../css/bootstrap.css"> 
<link rel="stylesheet" href="../css/home.css"> 
<title>SWA{PRO}SE</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

</head> 

<body> 
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#featured"></a> 
     </div> 
     <div class="collapse navbar-collapse" id="collapse" style="min-width:1100px"> 
     <ul class="nav navbar-nav navbar-right links"> 
      <li><a href="#featured">ABOUT</a></li> 
      <li><a href="#mission">SOFTWARE & WEB DEVELOPMENT</a></li> 
      <li><a href="#services">GAME DEVELOPEMENT</a></li> 
      <li><a href="#staff">ARTS & DESIGNS</a></li> 
      <li><a href="#testimonials">CONTACT US</a></li> 
     </ul>   
     </div> 
    </div> 
    </nav> 

    <div id="carousel" class="carousel slide" data-ride="carousel"> 
     <ol class="carousel-indicators"> 
      <li data-target="#carousel" data-slide-to="0" class="active"></li> 
      <li data-target="#carousel" data-slide-to="1"></li> 
      <li data-target="#carousel" data-slide-to="2"></li> 
     </ol> 
     <div class="carousel-inner" align="center" role="listbox"> 
      <div class="item active"> 
       <img src="../images/background1.jpg" class="img-responsive" alt="first photo"> 
      </div> 
      <div class="item"> 
       <img src="../images/background2.jpg" class="img-responsive" alt="second photo"> 
      </div> 
      <div class="item"> 
       <img src="../images/background3.jpg" class="img-responsive" alt="third photo"> 
      </div> 
      <a class="left carousel-control" href="#carousel" role="button" data-slide="prev"></a> 
      <a class="right carousel-control" href="#carousel" role="button" data-slide="next"></a> 
     </div> 
    </div>

источник

2016-05-07 RagnaLugria

Вам нужно будет использовать JS для этого. Тем не менее, Bootstrap уже имеет встроенный компонент для этого, который называется affix.

Просто добавьте data-spy и data-offset-top к вашей навигационной панели, как это:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation" data-spy="affix" data-offset-top="195"> 
    <!-- content here --> 
</nav>

А потом укладывать Navbar так:

.navbar-default.affix { 
    background-color: #000; 
}

P.S. Замените 195 на data-offset-top с высотой вашего баннера.

источник

2016-05-07 07:46:10

спасибо большое, это действительно помогло мне – RagnaLugria

Рад, что я мог бы помочь Ragna :) Отметьте это как правильный ответ, если это поможет вам в решении этой проблемы. ура –

Bootstrap Scroll Down Header Background

ответ

Смежные вопросы