Wie man eine Navbar und Karussell Bild Schieberegler in Bootstrap

Question

Ich habe eine Kopfzeile mit einer Navbar und ein Carousel Schiebebild mit Bootstrap Wie kann ich diese beiden zusammen auf Scroll behoben, wenn der Benutzer die Website scrollen, um die Informationen zu sehen navbar und Karussell immer noch auf der Oberseite befestigt, und die Informationen blättern unter der Überschrift

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
     <div class="container-fluid"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <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"> 
        <li> 
         <a href="index.html">Home</a> 
        </li> 
        <li> 
         <a href="aboutus.html">About Us</a> 
        </li> 
         <li> 
         <a href="services.html">Services</a> 
        </li> 
         <li> 
         <a href="factory.html">Factory</a> 
        </li> 
         <li> 
         <a href="projects.html">Projects</a> 
        </li> 
         <li> 
         <a href="client.html">Clients</a> 
        </li> 
         <li> 
         <a href="video.html">Video</a> 
        </li> 
        <li> 
         <a href="contactus.html">Contact Us</a> 
        </li> 
       </ul> 
      </div> 
      <!-- /.navbar-collapse --> 
     </div> 
     <!-- /.container --> 
    </nav> 
    <div class="row"> 
    <img src="img/logo%20corner.png" class="center-block img-responsive imglogo"> 
    </div> 
    <!-- Full Page Image Background Carousel Header --> 
    <header id="myCarousel" class="carousel slide"> 
     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
      <li data-target="#myCarousel" data-slide-to="1"></li> 
      <li data-target="#myCarousel" data-slide-to="2"></li> 
     </ol> 
     <!-- Wrapper for Slides --> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <!-- Set the first background image using inline CSS below. --> 
       <div class="fill" style="background-image:url('img/slide1.jpg');"></div> 
       <div class="carousel-caption"> 
       </div> 
      </div> 
      <div class="item"> 
       <!-- Set the second background image using inline CSS below. --> 
       <div class="fill" style="background-image:url('img/slide2.jpg');"></div> 
       <div class="carousel-caption"> 
       </div> 
      </div> 
      <div class="item"> 
       <!-- Set the third background image using inline CSS below. --> 
       <div class="fill" style="background-image:url('img/slide3.jpg');"></div> 
       <div class="carousel-caption"> 
       </div> 
      </div> 
     </div> 
     <!-- Controls --> 
     <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
      <span class="icon-prev"></span> 
     </a> 
     <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
      <span class="icon-next"></span> 
     </a> 
    </header> 

Answer 1

Wenn ich verstanden habe ich Ihnen einen Link, wo Sie Ihr Glück finden können.

http://www.w3schools.com/howto/howto_css_parallax.asp

Hoffnung helfen Ihnen :)

Answer 2

habe ich den vollständigen Code für Sie als eine Ressource mit Ihrem Dokument zu verweisen haben, weil, was Sie auf dem Laufenden die Aktie Bootstrap-Vorlage ohne Eingabe ist. Überprüfen Sie, ob das neueste Bootstrap installiert ist und ob die Dateien korrekt verknüpft sind. Unten habe ich ein CDN verwendet, aber es ist besser, es heruntergeladen zu haben.

Die Hauptsache sicherstellen, dass Sie die festen Header Navigation haben, ist der folgende Code:

<div class="navbar-wrapper"> 
<div class="container"> 
<div class="navbar navbar-inverse navbar-fixed-top"> 

Sie den obigen Code in den Code unten finden. Lass es mich wissen, wenn du irgendwelche Fragen hast.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Whatever</title> 
 
    <meta charset="utf-8"> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
</head> 
 
<body> 
 
<div class="navbar-wrapper"> 
 
    <div class="container"> 
 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
 

 
     <div class="navbar-header"> 
 
     <a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </a> 
 
     <a class="navbar-brand" href="#">Bootstrap 3</a> 
 
     </div> 
 
     <div class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Home</a> 
 
      </li> 
 
      <li><a href="http://www.bootply.com" target="ext">About</a> 
 
      </li> 
 
      <li><a href="#contact">Contact</a> 
 
      </li> 
 
      <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">Action</a> 
 
       </li> 
 
       <li><a href="#">Another action</a> 
 
       </li> 
 
       <li><a href="#">Something else here</a> 
 
       </li> 
 
       <li class="divider"></li> 
 
       <li><a href="#">Separated link</a> 
 
       </li> 
 
       <li><a href="#">One more separated link</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
    <!-- /container --> 
 
</div> 
 
<!-- /navbar wrapper --> 
 

 

 
<!-- Carousel --> 
 
<div id="myCarousel" class="carousel slide"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
 

 
    <div class="carousel-inner"> 
 
     <div class="item active"> 
 
     <img src="/root/directory/file_path.jpg" class="fill"> 
 
     <div class="container"> 
 
      <div class="carousel-caption"> 
 
      <h1>Bootstrap 3 Carousel Layout</h1> 
 
      <pthis is="" an="" example="" layout="" with="" carousel="" that="" uses="" the="" bootstrap="" 3="" styles.<="" small=""> 
 
       <p></p> 
 
       <p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a> 
 
       </p> 
 
      </pthis> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="/root/directory/file_path.jpg" class="fill"> 
 
     <div class="container"> 
 
      <div class="carousel-caption"> 
 
      <h1>Changes to the Grid</h1> 
 
      <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p> 
 
      <p><a class="btn btn-large btn-primary" href="#">Learn more</a> 
 
      </p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
 
     <span class="icon-prev"></span> 
 
    </a> 
 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
 
     <span class="icon-next"></span> 
 
    </a> 
 
</div> 
 
</body> 
 
</html>