Balken über Navigation bei Bootstrap

[JuicyArts]

Hallo Leute,

EDIT: also unr damit das alles verständlicher ist. Im Grunde will ich sowas basteln: http://www.tvmovie.de
Die Navigation verfolgt einen erst ab einem späteren Zeitpunkt.

ich versuche gerade eine neue Seite zu designen. Dabei habe ich versucht einen vertikalen Balken über der Navigation zu basteln. Das funktioniert auch soweit super, jedoch habe ich danach Schwierigkeiten wenn ich versuche die Navigation, über die Klasse "navbar-fixed-top" mit scrollen zu lassen.
Die Navigation scrollt dann zwar mit aber jedoch mit einem Abstand von der Größe des Balkens. Es entsteht also eine Lücke zwischen Navigation und dem höchsten Punkt der Website. Nur zum Verständnis ich will nicht das der Balken über der Navigation mit scrollt, es soll sich nur die Navigation bewegen sobald sie den oberen Bildschirmrand berührt.

Mein Lösungsansatz war folgender:
Ich habe versucht mit JavaScript von der Klasse "navbar-static-top" in "navbar-fixed-top" zu wechseln sobald die Navigation den oberen Bereich berührt. Also oben ankommt.

Nun die Frage gibt es hierfür, vielleicht einen Ansatz in Bootstrap ohne JavaScript?

$(document).ready(function() {
  var top = $('.navbar-static-top').offset().top;
  $(window).scroll(function()

  {
    if($(this).scrollTop() > top) {
      $('.navbar-static-top').addClass('.navbar-fixed-top');
    } else {
      $('.navbar-static-top').removeClass('.navbar-fixed-top');
    }
  });
});

Hier mein html Code

  <!-- GRÜNE LEISTE
================================================== -->
<div class="leiste container-fluid text-center schatten">
  <div class="row">
  <div class="col-md-2 "></div>
  <div class="col-md-3 ">Haben Sie Fragen? </div>
  <div class="col-md-2 "><p id='telefon' class='glyphicon glyphicon-earphone'></p>   012345789 </div>
  <div class="col-md-3 "><p id='Mail' class='glyphicon glyphicon-envelope'></p> info@dasda.de</div>
  <div class="col-md-2 "></div>
  </div></div>



<nav class="navbar navbar-default navbar-fixed-top" >

        <div class="container">
        <a class="navbar-brand page-scroll" href="#page-top"><img src="" alt="Logo" width="140" height="43" class="img-responsive"></a>
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll ">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">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 navbar-right">
            <li class="hidden active">
            <a href="#page-top"></a>
            </li>
            <li class=""> <a class="page-scroll" href="#services">Home</a></li>
            <li>
            <a class="page-scroll" href="#portfolio">Infos</a>
            </li>
            <li>
            <a class="page-scroll" href="#about">Über Mich</a>
            </li>
            <li>
            <a class="page-scroll" href="#contact">Kontakt</a>
            </li>
        </ul>
        </div>
      
        <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
        </nav>

.leiste.container-fluid {
    position:relative;
    background-color: #0aa03c;
    color: #fff;
    align-content:center;

  
}

 

[dn3d_fanboy]

Vielleicht hilft das schon:

[css]navbar-fixed-top {
position: fixed;
top: 0px;
}[/css]

Ansonsten bitte mal einen Link zur Seite posten, damit man den kompletten Code sehen kann.

 

[afr0kalypse]

Schau mal hier:
http://www.w3schools.com/bootstrap/bootstrap_affix.asp

 

[JuicyArts]

Schau mal hier:
http://www.w3schools.com/bootstrap/bootstrap_affix.asp

Wow vielen dank. Die Seite kannte ich bisher nicht, ist eine riesen Hilfe.


@dn3d_fanboy : Danke das hat zwar auch geholfen allerdings hatte das einen unschönen Nebeneffekt. Die Website wird zur Zeit nicht gehostet so dass ich keinen Link posten konnte. Trotzdem danke euch für die Hilfe.