2016-07-22 16 views
0

Ich mache eine Website in Bootstrap. Ich habe die Navigationsleiste unterhalb des Header-Teils hinzugefügt. Grundsätzlich möchte ich, dass meine Navigationsleiste beim Scrollen oben auf der Seite bleibt. Ich habe die Bootstrap-Dokumentation gesehen, um zu sehen, wie diese Funktion ausgeführt werden kann, aber ich habe nichts gefunden. Also hier ist der Link zu meinem site, damit Sie sehen können, wie es ist. Bitte, wenn Sie wissen, wie Sie dieses Problem lösen, lassen Sie es mich bitte wissen.So stellen Sie das Bootstrap-Navigationsmenü ein, um oben auf der Seite beim Scrollen zu bleiben

Hier ist der vollständige Code:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
     <title>Daygostar.ir</title> 

     <!-- Bootstrap --> 
     <link href="css/bootstrap.css" rel="stylesheet"/> 
     <link href="styles.css" rel="stylesheet"/> 
     <link href="css/1140.css" rel="stylesheet" type="text/css"> 
     <link href="css/custom.css" rel="stylesheet" type="text/css"> 
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
     <!--[if lt IE 9]> 
      <script src="js/html5shiv.min.js"></script> 
      <script src="js/respond.min.js"></script> 
     <![endif]--> 
     <script> 
     var vid = document.getElementById("bgvid"); 
     var pauseButton = document.querySelector("#polina button"); 

     function vidFade() { 
      vid.classList.add("stopfade"); 
     } 

     vid.addEventListener('ended', function() 
     { 
     // only functional if "loop" is removed 
     vid.pause(); 
     // to capture IE10 
     vidFade(); 
     }); 


     pauseButton.addEventListener("click", function() { 
      vid.classList.toggle("stopfade"); 
      if (vid.paused) { 
      vid.play(); 
      pauseButton.innerHTML = "Pause"; 
      } else { 
      vid.pause(); 
      pauseButton.innerHTML = "Paused"; 
      } 
     }) 
     </script> 
     <script type="text/javascript"> 
      var ypos,image; 
      function parallex() { 
       image = document.getElementById('image'); 
       ypos = window.pageYOffset; 
       image.style.top = ypos * .7+ 'px'; 
      } 
      window.addEventListener('scroll', parallex),false; 
     </script> 
    </head> 
    <body data-spy="scroll" data-target="#my-navbar" > 
     <div id="wrapper"> 
      <div id="header"> 
       <div id="image"> 
        <div class="container12"> 
         <ul id="scene"> 
          <li class="layer" id="l1" data-depth="0.40"><img src="img/larg-logo.png"></li> 
          <li class="layer" id="l2" data-depth="0.80"><img src="img/small-logo.png"></li> 
         </ul> 
        </div> 
       </div> 
      </div> 
      <div id="content"> 
       <nav class="navbar navbar-default" id="topMenu"> 
        <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> 
          <a class="navbar-brand" href="#"><img src="img/logo.png"></a> 
         </div> 

         <!-- Collect the nav links, forms, and other content for toggling --> 
         <div class="collapse navbar-collapse BKoodakBold" id="bs-example-navbar-collapse-1"> 
          <ul class="nav navbar-nav navbar-right" id="navigationMenu"> 
           <li><a href="#">تماس با ما</a></li> 
           <li><a href="#">درباره ما</a></li> 
           <li><a href="#">پشتیبانی افلاین</a></li> 
           <li><a href="#">نمونه کارها</a></li> 
           <li><a href="#">سوالات متداول</a></li> 
           <li><a href="#">تعرفه ها</a></li> 
           <li><a href="#">خدمات ما</a></li> 
           <li><a href="#">دانستنی ها</a></li> 
           <li><a href="#">مقالات سایت</a></li> 
           <li><a href="#">پکیج ها</a></li> 
           <li class="active"><a href="#">صفحه اصلی</a></li> 
           <li class="dropdown"> 
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">منوی کاربران <span class="caret"></span></a> 
            <ul class="dropdown-menu" id="dropDown"> 
             <li><a href="#">ورود کاربران</a></li> 
             <li><a href="#">ثبت نام کاربران</a></li> 
            </ul> 
           </li> 
          </ul> 
         </div><!-- /.navbar-collapse --> 
        </div><!-- /.container-fluid --> 
       </nav> 

       <div class="container-fluid"> 
        <div class="page-header BHoma" id="pageHeader"> 
         <h1> 
         خدمات دپارتمان طراحی سایت دی گستر 
         <hr class="style18"> 
         <small style="padding-right:100px;padding-left:100px;">... طراحی انواع سایت های شخصی، فروشگاهی، شرکتی، سازمانی، خبری و</small> 
         </h1> 
        </div> 
       </div></br> 

       <div class="container"> 
        <div class="row"> 
         <div class="col-md-6"> 
          <img style="float:;" src="images/home-1.png"></img> 
         </div> 
         <div class="col-md-4 col-md-offset-2"> 
          <h1>INTEGRITY</h1> 
          <ul> 
           <li>Integrity is a beautifully crafted, all-</li> 
           <li>purpose design that works equally well for </li> 
           <li>creatives and professionals alike. Clean </li> 
           <li>lines give it an understated elegance that </li> 
           <li>feels current and fresh without being too </li> 
           <li>flashy. See all Integrity features.</li> 
          </ul> 
          <h3>HIGHLIGHTS</h3> 
          <ul> 
           <li>Great For Business Sites</li> 
           <li>Great For Business Sites </li> 
           <li>Great For Business Sites</li> 
          </ul> 
         </div> 
        </div> 
       </div></br> 

       <div class="container"> 
        <div class="row"> 
         <div class="col-md-6"> 
          <img style="float:;" src="images/home-2.png"></img> 
         </div> 
         <div class="col-md-4 col-md-offset-2"> 
          <h1>INTEGRITY</h1> 
          <ul> 
           <li>Integrity is a beautifully crafted, all-</li> 
           <li>purpose design that works equally well for </li> 
           <li>creatives and professionals alike. Clean </li> 
           <li>lines give it an understated elegance that </li> 
           <li>feels current and fresh without being too </li> 
           <li>flashy. See all Integrity features.</li> 
          </ul> 
          <h3>HIGHLIGHTS</h3> 
          <ul> 
           <li>Great For Business Sites</li> 
           <li>Great For Business Sites </li> 
           <li>Great For Business Sites</li> 
          </ul> 
         </div> 
        </div> 
       </div></br> 

       <div class="container"> 
        <div class="row"> 
         <div class="col-md-6"> 
          <img style="float:;" src="images/home-3.png"></img> 
         </div> 
         <div class="col-md-4 col-md-offset-2"> 
          <h1>INTEGRITY</h1> 
          <ul> 
           <li>Integrity is a beautifully crafted, all-</li> 
           <li>purpose design that works equally well for </li> 
           <li>creatives and professionals alike. Clean </li> 
           <li>lines give it an understated elegance that </li> 
           <li>feels current and fresh without being too </li> 
           <li>flashy. See all Integrity features.</li> 
          </ul> 
          <h3>HIGHLIGHTS</h3> 
          <ul> 
           <li>Great For Business Sites</li> 
           <li>Great For Business Sites </li> 
           <li>Great For Business Sites</li> 
          </ul> 
         </div> 
        </div> 
       </div></br> 

       <div class="container"> 
        <div class="row"> 
         <div class="col-md-6"> 
          <img style="float:;" src="images/home-4.png"></img> 
         </div> 
         <div class="col-md-4 col-md-offset-2"> 
          <h1>INTEGRITY</h1> 
          <ul> 
           <li>Integrity is a beautifully crafted, all-</li> 
           <li>purpose design that works equally well for </li> 
           <li>creatives and professionals alike. Clean </li> 
           <li>lines give it an understated elegance that </li> 
           <li>feels current and fresh without being too </li> 
           <li>flashy. See all Integrity features.</li> 
          </ul> 
          <h3>HIGHLIGHTS</h3> 
          <ul> 
           <li>Great For Business Sites</li> 
           <li>Great For Business Sites </li> 
           <li>Great For Business Sites</li> 
          </ul> 
         </div> 
        </div> 
       </div></br> 
      </div> 

      <div class="container-fluid"> 
       <div class="row" id="paraDiv"> 
        <div class="col-md-8 col-md-offset-2" id="contentDiv"><span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span>&nbsp;<strong>ALL STACKS INCLUDED.</strong> NO OTHER THEME ON THE PLANET HAS THIS VERSATILITY!</div> 
        <div class="col-md-offset-2"></div> 
       </div> 
      </div> 

      <div class="container-fluid"> 
       <div class="row"> 
        <div class="col-md-12"> 
         <video autoplay poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" loop> 
          <source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm"> 
          <source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4"> 
         </video> 
         <div id="polina"> 
          <h1>Polina</h1> 
          <p>filmed by Alexander Wagner 2011 
          <p><a href="http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video">original article</a> 
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor.</p> 
          <p>Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nisl.</p> 
          <button>Pause</button> 
         </div> 
        </div> 
       </div> 
      </div> 

      <footer> 
      </footer> 

      <!-- Scripts --> 
      <script src="deploy/parallax.min.js"></script> 
      <script> 

      // Pretty simple huh? 
      var scene = document.getElementById('scene'); 
      var parallax = new Parallax(scene); 

      </script> 
      <script src="js/script.js"> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
      <script src="js/bootstrap.min.js"></script> 
     </div> 
    </body> 
</html> 

Antwort

2

Bitte lesen Sie die Bootstrap-Dokumentation für .navbar hier:

http://getbootstrap.com/components/#navbar

Der Bootstrap-Framework durch eine der folgenden Klassen native Unterstützung für eine feste Navigation hat :

.navbar-fixed-top 
.navbar-fixed-bottom 
.navbar-static-top 

Jeder funktioniert anders, also wählen Sie den, der am besten für dieses Projekt geeignet ist.

+1

Insbesondere http://getbootstrap.com/components/# navbar-fixed-top – adam0101

0

Sie können die Navigationsleiste an den oberen Rand des Browsers anpassen, indem Sie ein paar einfache CSS-Codes zu Ihrem Bootstrap-Thema hinzufügen. Die Klasse ist sticky-nav im Bootstrap enthalten. Hier ist das CSS-Beispiel und darunter ein Nav-Beispiel, das das CSS-Beispiel verwendet.

.page-header { 
    padding-top: 80px; /* nav height */ 
    } 
    .sticky-nav { 
     position:fixed; 
     top:0; 
     width: 100%; 
     z-index: 99999999; 
    } 

können Sie auch haben sie tun es nur für Desktop, indem es wie folgt tun:

@media (min-width: 768px) { 
    .page-header { 
    padding-top: 80px; /* nav height */ 
    } 
    .sticky-nav { 
     position:fixed; 
     top:0; 
     width: 100%; 
     z-index: 99999999; 
    } 
} 

Hier ist der HTML-Navigationscode:

<nav class="row navbar navbar-trans sticky-nav navbar-white"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <img class="icon-x" src="img/m/x.svg" alt="Close Menu"> 
     </button> 
     <a class="navbar-brand-trans" href="#"><img src="/img/logo-top-t.svg" alt="Logo"> 
     </a><a class="navbar-brand-white" href="#"><img src="/img/logo-top-w.svg" alt="Logo"> 
     </a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="/" id="home" class="active">Home</a></li> 
      <li class="dropdown"> 
      <a href="#" data-toggle="dropdown" class="dropdown-toggle" id="serv-dropdown">Services <span class="glyphicon glyphicon glyphicon-menu-down"></span></a> 
      <ul class="dropdown-menu"> 

       <div class="col-md-1 visible-md visible-lg"></div> 

       <div class="col-sm-12 col-md-10"> 
       <div class="col-sm-3 heading hidden-xs"> 
        <p>Services</p> 
       </div> 
       <div class="col-sm-3 hcol"> 
        <li><a href="/consulting">Consulting Services</a></li> 
        <li><a href="/custom">Custom Software</a></li> 
        <li><a href="/django">Development Django</a></li> 
        <li><a href="/mobiledevelopment">Development Mobile</a></li> 
       </div> 
       <div class="col-sm-3 hcol"> 
        <li><a href="/php">Development PHP</a></li> 
        <li><a href="/python">Development Python</a></li> 
        <li><a href="/webdevelopment">Web Development</a></li> 
       </div> 
       <div class="col-sm-3 hcol hidden-xs"> 
        <span>Our Experience Drives</span> <br> 
        <span>Your Success</span> <br><br> 
        <button type="button" name="projects" class="jq-btn blue">OUR PROJECTS</button> 
       </div> 
       </div> 

       <div class="col-md-1 visible-md visible-lg"></div> 

      </ul> 
      </li> 
      <li><a href="/projects">Projects</a></li> 
      <li><a href="/team">Team</a> </li> 
      <li><a href="/blog">Blog</a></li> 
      <li> 
      <div class="col-xs-12 visible-xs text-center"><a id="contact-btn" onclick="toggleContact();">Contact Us</a></div> 

      <a class="hidden-xs" id="contact-btn" onclick="toggleContact();">Contact Us</a> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </nav> 
0

Um einen klebrigen Header (eine, die beim Scrollen behoben wird. Sie müssen eine Funktion an das Ereignis window.onscroll binden, das überprüft, ob die Kopfzeile die aktuelle Bildlaufposition passiert, und fügen Sie die Bootstrap navbar-fixed-top cla hinzu ss es:

$(window).on('scroll', fixHeader); 
var header = $('nav'); 
var headerOffset = header.offset().top; 
function fixHeader(evt){  
    var currentScroll = $(window).scrollTop() 
    if(headerOffset <= currentScroll){ 
    header.addClass('navbar-fixed-top') 
    } 
    else{ 
     header.removeClass('navbar-fixed-top'); 
    } 
} 

https://jsfiddle.net/hgLzqnqp/2/

Sie werden auch den Inhalt nach dem nav nach unten drücken wollen, wie es aus der Erbringung Strom entfernt werden. Hier ist ein Beispiel dafür, wie man das macht: https://jsfiddle.net/hgLzqnqp/3/

Hoffentlich position: sticky irgendwann CSS kommen, und es gibt bereits einige polyfills dafür: https://github.com/filamentgroup/fixed-sticky

Verwandte Themen