Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Balken über Navigation bei Bootstrap“

JuicyArts

Noch nicht viel geschrieben

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?

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
HTML:
  <!-- 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>


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

  
}
 
Zuletzt bearbeitet:

dn3d_fanboy

Aktives Mitglied

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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
175.158
Beiträge
2.581.869
Mitglieder
67.223
Neuestes Mitglied
Desiree
Oben