Auf Thema antworten 2026

Beitrag

<blockquote data-quote="JuicyArts" data-source="post: 2615476" data-attributes="member: 528483">Hallo Leute,EDIT: also unr damit das alles verständlicher ist. Im Grunde will ich sowas basteln: <a href="http://www.tvmovie.de" target="_blank">http://www.tvmovie.de</a>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 &quot;navbar-fixed-top&quot; 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 &quot;navbar-static-top&quot; in &quot;navbar-fixed-top&quot; 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?[code=JavaScript]$(document).ready(function() {&nbsp; var top = $(&#039;.navbar-static-top&#039;).offset().top;&nbsp; $(window).scroll(function()&nbsp; {&nbsp; &nbsp; if($(this).scrollTop() &gt; top) {&nbsp; &nbsp; &nbsp; $(&#039;.navbar-static-top&#039;).addClass(&#039;.navbar-fixed-top&#039;);&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; $(&#039;.navbar-static-top&#039;).removeClass(&#039;.navbar-fixed-top&#039;);&nbsp; &nbsp; }&nbsp; });});[/code]Hier mein html Code[html]&nbsp; &lt;!-- GRÜNE LEISTE================================================== --&gt;&lt;div class=&quot;leiste container-fluid text-center schatten&quot;&gt;&nbsp; &lt;div class=&quot;row&quot;&gt;&nbsp; &lt;div class=&quot;col-md-2 &quot;&gt;&lt;/div&gt;&nbsp; &lt;div class=&quot;col-md-3 &quot;&gt;Haben Sie Fragen? &lt;/div&gt;&nbsp; &lt;div class=&quot;col-md-2 &quot;&gt;&lt;p id=&#039;telefon&#039; class=&#039;glyphicon glyphicon-earphone&#039;&gt;&lt;/p&gt;&nbsp;&nbsp; 012345789 &lt;/div&gt;&nbsp; &lt;div class=&quot;col-md-3 &quot;&gt;&lt;p id=&#039;Mail&#039; class=&#039;glyphicon glyphicon-envelope&#039;&gt;&lt;/p&gt; info@dasda.de&lt;/div&gt;&nbsp; &lt;div class=&quot;col-md-2 &quot;&gt;&lt;/div&gt;&nbsp; &lt;/div&gt;&lt;/div&gt;&lt;nav class=&quot;navbar navbar-default navbar-fixed-top&quot; &gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;container&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;a class=&quot;navbar-brand page-scroll&quot; href=&quot;#page-top&quot;&gt;&lt;img src=&quot;&quot; alt=&quot;Logo&quot; width=&quot;140&quot; height=&quot;43&quot; class=&quot;img-responsive&quot;&gt;&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- Brand and toggle get grouped for better mobile display --&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;navbar-header page-scroll &quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;button type=&quot;button&quot; class=&quot;navbar-toggle&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#bs-example-navbar-collapse-1&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;span class=&quot;sr-only&quot;&gt;Navigation&lt;/span&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/button&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;bs-example-navbar-collapse-1&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;ul class=&quot;nav navbar-nav navbar-right&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li class=&quot;hidden active&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#page-top&quot;&gt;&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li class=&quot;&quot;&gt; &lt;a class=&quot;page-scroll&quot; href=&quot;#services&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class=&quot;page-scroll&quot; href=&quot;#portfolio&quot;&gt;Infos&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class=&quot;page-scroll&quot; href=&quot;#about&quot;&gt;Über Mich&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class=&quot;page-scroll&quot; href=&quot;#contact&quot;&gt;Kontakt&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- /.navbar-collapse --&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- /.container-fluid --&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/nav&gt;&nbsp; [/html][code=CSS].leiste.container-fluid {&nbsp; &nbsp; position:relative;&nbsp; &nbsp; background-color: #0aa03c;&nbsp; &nbsp; color: #fff;&nbsp; &nbsp; align-content:center;&nbsp; }[/code]</blockquote>

[QUOTE="JuicyArts, post: 2615476, member: 528483"] Hallo Leute, EDIT: also unr damit das alles verständlicher ist. Im Grunde will ich sowas basteln: [URL]http://www.tvmovie.de[/URL] 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? [code=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'); } }); });[/code] Hier mein html Code [html]  <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 "> 012345789 </div> <div class="col-md-3 "> 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>  <div class="navbar-header page-scroll "> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> Navigation </button> </div>  <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>  </div>  </nav> [/html] [code=CSS].leiste.container-fluid { position:relative; background-color: #0aa03c; color: #fff; align-content:center; } [/code] [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?