Navigation die beim Scrollen mitrutscht

[ThomasSchmidt]

Hallo in die Runde.

Habe kürzlich diese Website entdeckt und war begeistert als ich bemerkt habe dass das Menü sowie die Überschrift eines Artikels beim Scrollen "mitrutschen".

Hat jemand eine Idee ob und wie man das mit Contao lösen kann?

[Sebastian]

HI

CSS kann soetwas mit position: fixed;

Sebastian

[ThomasSchmidt]

So einfach? Das muss ich demnächst mal testen. Vielen Dank!

[Russe]

CSS kann soetwas mit position: fixed;

Jain, bei position: fixed bleibt der Bereich zwar stehen, aber nicht so wie in dem verlinkten Beispiel. Bei dem Beispiel von oben wandert das Menü erst bis nach oben zum Rand und bleibt dann stehen, das geht nur mit Hilfe von JavaScript. Nur mit CSS bleibt das Menü an der Stelle an der es beim Seitenaufbau schon steht.

[psren]

Falls noch von Interesse: So könnte es gehen.

<script>
(function($) {
  window.addEvent('domready',function(){
    var fix = $('myNavigation');
    var fold = fix.getCoordinates().top;
    
    window.addEvent('scroll',function(){
      var scroll = window.getScroll();

      if(scroll.y > fold){
        fix.setStyles({
          position: 'fixed',
          width: '100%',
          top: 0
        });
        fix.addClass('fixed');
        
      } else if(scroll.y <= fold){
        fix.setStyle('position', 'static');
        fix.removeClass('fixed');
      }
      
      
    });
  });
})(document.id);
</script>

[matthias123]

zufällig hier hineingeschaut, copy and paste und läuft perfekt! Vielen Dank!

[psren]

Freut mich zu hören. Hatte es nämlich nicht getestet :-)

[Morpheus200k]

Hallo zusammen,

fand diesen Beitrag hier zumindest schon einmal hilfreich um zu wissen, welche Sprache es ist: Java. Jetzt arbeite ich mit dem neuesten Dreamweaver Programm (CC 2015) an meiner Website und will genau eine solche Navizeile mitlaufen lassen. Mit dem Code hier kann ich als Anfänger nichts anfangen bzw. weiß ich nicht, wo ich ihn einfügen soll? Habe für die gesamte Navigationszeile folgenden html code:

<nav class="navbar navbar-default" id="navigation_haupt">
<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="#defaultNavbar1"><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="#">Brand</a></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link<span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown<span class="caret"></span></a>
<ul class="dropdown-menu" role="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 class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown<span class="caret"></span></a>
<ul class="dropdown-menu" role="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>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>

Wo muss ich denn den Befehl für das mitrutschende "gerät" einfügen?

Freue mich auf eine Antwort.

LG
Marvin

[Morpheus200k]

Falls noch von Interesse: So könnte es gehen.

<script>
(function($) {
  window.addEvent('domready',function(){
    var fix = $('myNavigation');
    var fold = fix.getCoordinates().top;
    
    window.addEvent('scroll',function(){
      var scroll = window.getScroll();

      if(scroll.y > fold){
        fix.setStyles({
          position: 'fixed',
          width: '100%',
          top: 0
        });
        fix.addClass('fixed');
        
      } else if(scroll.y <= fold){
        fix.setStyle('position', 'static');
        fix.removeClass('fixed');
      }
      
      
    });
  });
})(document.id);
</script>

Hallo zusammen,

fand diesen Beitrag hier zumindest schon einmal hilfreich um zu wissen, welche Sprache es ist: Java. Jetzt arbeite ich mit dem neuesten Dreamweaver Programm (CC 2015) an meiner Website und will genau eine solche Navizeile mitlaufen lassen. Mit dem Code hier kann ich als Anfänger nichts anfangen bzw. weiß ich nicht, wo ich ihn einfügen soll? Habe für die gesamte Navigationszeile folgenden html code:

<nav class="navbar navbar-default" id="navigation_haupt">
<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="#defaultNavbar1"><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="#">Brand</a></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link<span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown<span class="caret"></span></a>
<ul class="dropdown-menu" role="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 class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown<span class="caret"></span></a>
<ul class="dropdown-menu" role="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>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>

Wo muss ich denn den Befehl für das mitrutschende "gerät" einfügen?

Freue mich auf eine Antwort.

LG
Marvin

[derRenner]

Hallo,

der einfachste Weg um jQuery/Javascript einzufügen ist der Weg über das Seitenlayout.
Hier kannst du im Bereich 'Eigener JavaScript-Code' das script einfügen

[Morpheus200k]

Hi Bernhard,

ich arbeite mit Dreamweaver...sorry - ich bin hierbei Anfänger. Wo muss ich denn bei Dreamweaver da ansetzen? Ich habe die Navbar soweit gefixed - jetzt muss ich nur noch wissen wo und wie ich den entsprechenden Java Befehl eingeben kann? Kann ich den Befehl aus dem Forum hier denn einfach übernehmen oder muss ich dabei noch was verändern?

LG
Marvin

[derRenner]

??
du sprichst aber schon von Contao, oder?
Dass bzw. wie man mit Dreamweaver auf Contao zugreifen kann, wüsste ich eigentlich gar nicht.
Der HTML-Code, wie in deinem Beispiel oben, wird über die templates erstellt, sodass deine Webseite angezeigt wird.

... meine Vermutung: du bist im falschen Forum (?)

[Andreas]

@Morpheus200k

Hier hat niemand was von Java gesagt. Du musst Javascript benutzen.

Warum postest du den HTML-Code? Warum zeichnest du ihn nicht als HTML aus, so dass er auch lesbar wäre? Warum postest du den HTML-Code zweimal?

Der HTML-Code ist überflüssig. Wenn schon, dann zeige bitte einen Link zu der Seite.

Mit dem JS-Schnipsel untersuchst du während des Scrollens, wo sich die Navigation, der Header oder der Hauptbereich befindet. Erreicht ein Element eine Position wo du möchtest, dass die Nav. stehen bleibt, dann gibt|entfernt JS der Navigation eine CSS-Klasse, welche dann dafür sorgt (dein CSS), dass die Nav. stehen bleibt.

Der Code-Schnipsel ist für MooTools. Er hat einen Fehler und die Wahl der Variablen ist unglücklich. Außerdem brauchst du mit JS keine Styles zu setzen, wenn du schon eine Klasse aufsetzt. Hier mal ne korrigierte Version (nicht getestet)

<script>
  (function() {
    window.addEvent('domready', function() {

      var
        nav = $('myNavigation'),
        navTop = nav.getCoordinates().top,
        scroll
      ;

      window.addEvent('scroll', function() {
        scroll = window.getScroll();

        if(scroll.y > navTop) {
          nav.addClass('fixed');
        }
        else if(scroll.y <= navTop){
          nav.removeClass('fixed');
        }
      });

    });
  })();
</script> 

Dreamweaver ist sehr umfassend und hat ein großes Handbuch. Wenn du ihn schon benutzt, dann versuche ihn nur als Editor zu benutzen, mit welchem du die Dateien auf dem Server bearbeitest.

[manoelo]

guckst du
http://ck2013.may17.de/sticky-header.html
scöne grüße