Druckbare Version
Moin,
aufgrund der hohen Nachfrage zu dem Thema, habe ich angefangen dazu ein Tutorial zu schreiben.
Es behandelt das Thema einer am Fensterrand angedockten Navigation, wenn diese durch scrollen den sichtbaren Bereich verlässt.
Später wird noch ergänzt, wie man die Links auf eine OnePage Seite auf aktiv stellt, wenn man in aktiven Bereich gescrollt hat.
Das ganze ist fertig zu sehen unter stefanmelz.de
Edit:
Der verlorenen Link:
http://de.contaowiki.org/Docked_Navigation
Finde ich klasse !
Wann kommen die ersten Teile deines Tutorials ?
Schreibst Du es bitte auch ins Wiki ?
wunderbar! Auf deine tutorials bin ich sehr gespannt.. finde die Technik sehr interessant! wir warten :)
Huch, Link vergessen. Ist ja schon drin:
http://de.contaowiki.org/Docked_Navigation
Oh wusste garnicht das solch Kleinigkeiten so große Begeisterung finden. Sowas hab ich vor ~2 Jahren mal gebastelt und auch sonst hab ich wohl viele kleine moo_ templates die das eine oder andere Gimmick bereitstellen. Bräuchte nur mal jemand der das Zeug veröffentlicht :rolleyes:
immer raus damit Psi, nicht jeder kann gut mit moo&co umgehen.. da sind angepasste templates oder Anleitungen für solche dinge in contao immer klasse! Nicht nur weil man es verwenden kann...sondern es hilft auch zu verstehen um dann eventuell selbst mehr Beitrag leisten zu können (ja, ok ich denke da natürlich an mich;))Zitat:
Zitat von Psi
hab deine moo-collection natürlich schon unter der Lupe :)
ich finde die docked_navigation echt klasse..
gruss
ways
...aber leider will es bei mir nich klappen.
Was mache ich bloß falsch?
Seite angelegt, CSS, dazu, Script eingebungeden, nix...
Meine Seite hat folgende Struktur. Script als function.js eingebunden.
Was fehlt?Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="function.js"></script>
<style type="text/css">
.scrolled {
position:fixed;
top:0;
width:100%;
}
#dienste {
background-color: #FCF;
height: 200px;
}
#profil {
background-color: #9CF;
height: 200px;
}
#arbeiten {
background-color: #CCF;
height: 200px;
}
</style>
</head>
<body>
<div id="navi">
<ul>
<li class="dienste"><a href="#top">Dienstleistungen</a></li>
<li class="arbeiten"><a href="#arbeiten">Arbeitsbeispiele</a></li>
<li class="profil"><a href="#profil">Profil und Kontakt</a></li>
</ul>
</div>
<div id="dienste">
dfljiengüi</div>
<div id="arbeiten">
#fjgüspginer</div>
<div id="profil">
fanwuüwofuncüwe</div>
</body>
</html>
Haste du mal da js dazu? Kriegt die Navi beim scrollen denn die neue CSS Klasse?
Hallo,
hab's gestern Abend nochmal im Schnelldurchlauf zusammen gesetzt.
Funktioniert, klasse!!!
Das einzige was mich noch stört: Sobald die Navi oben am Browserfenster anstößt, ruckelt es ein paar mal...
Ich vermute, das liegt am Inhalt des <div>.
Falls ich es nicht weg bekomme , frag ich nochmal nach.
Vielen Dank.
<privat> Hast ein Bier im Schalli verdient! ;-)</privat>
Hm, ne das wahrscheinlich, weil die Navi bei position fixed aus dem html fluss rausgerissen wird und der nachfolgende inhalt dann hochspringt. Theoretisch musst du dem nachfolgenden inhalt beim wechsel der navigationsklasse einen margin-top in höhe der Navigationselementhöhe zugeben. Also wenn die Navi 130px hoch ist, muss zusätzlich zum klassenwechsel noch ein margin-top: 130px zum nächsten element in der hirarchie hinzugefügt werden.
Baue ich irgendwann noch ins wiki dazu.
...yo, das macht Sinn.
Habe die Lösung dazu mal ins Wiki geschrieben.Zitat:
Zitat von melzebub
Genau daran hänge ich jetzt, da ich mich wahrscheinlich mit Javascript nicht gut genug auskenne. Ich habe erst den Code aus dem Wiki Artikel genommen, und dann den direkt von deiner Webseite (siehe nachfolgenden Code). In dem Code habe ich nur die Klassen geändert, die bei mir "mod_customnav" und "container" heißen.Zitat:
Zitat von melzebub
Wie Ihr seht auf http://2013.das6040.de/ legt sich beim Scrollen der "container" über den "mod_customnav". Wie kann ich das verhindern?
Code:
window.addEvent('domready',function(){
/*navi*/
var navi = $('navi');
var container = $('container');
var arbeiten = $('arbeiten');
var profil = $('profil');
var windowcoords = $(window).getCoordinates();
var navicoords = navi.getCoordinates();
var containercoords = container.getCoordinates();
var arbeitencoords = arbeiten.getCoordinates();
var profilcoords = profil.getCoordinates();
//std.
$$('li.container a').addClass('button');
window.addEvent('scroll',function(){
var scroll = this.getScroll();
//navidocking
if((scroll.y) > navicoords.top)
{
var navpos = navi.addClass('mod_customnav');
container.set('style','margin-top:'+navicoords.height+'px');
//anti ios :)
$$('.ios #container').set('style','margin-top:0');
}
else
{
var navpos = navi.removeClass('mod_customnav');
container.set('style','margin-top:0');
}
//check position for matching with active status
if((scroll.y + -navicoords.height+120) > containercoords.top)
{
$$('#navi a.button').removeClass('button');
$$('li.arbeiten a').addClass('button');
}
else
{
$$('#navi a.button').removeClass('button');
$$('li.container a').addClass('button');
}
if ((scroll.y+windowcoords.height-120) > profilcoords.top)
{
$$('#navi a.button').removeClass('button');
$$('li.profil a').addClass('button');
}
});
var mySmoothScroll = new Fx.SmoothScroll({
links: 'a',
wheelStops: false,
offset: {
x: 0,
y: -navicoords.height
}
});
})
Ich habe gerade selber eine hoffentlich saubere Lösung gefunden, indem ich der Klasse
mitgegeben habe, so ist sie immer im Vordergrund. Weitere Erklärung zu z-index, siehe http://de.selfhtml.org/css/eigenscha...ng.htm#z_indexCode:.mod_customnav {
z-index:10000;
}
Würdet Ihr das auch so machen, oder gibt es noch eine bessere Lösung?
Hi, ja das kannst du so machen. Um den Z-Index zu benutzen musst du aber immer noch eine position Angabe machen. Also position:relative zum Beispiel.
Hallo Stefan,
danke für diese super Anleitung, gefällt mir sehr!
Konnte es auch auf mein Projekt umsetzen.
Allerdings gibt es bei mir noch einen kleinen Fehler:
Wenn ich die Seite lade und noch nicht gescrollt wurde und ich einen Link anklicke wird nicht smooth gescrollt, sondern hingesprungen (wie das so ein normaler Anchor halt macht). Die Navigation wird dann auch nicht oben angedockt und ist weg. Wenn ich dann scrolle erscheind die Navigation wieder und ist dann angedockt, also alles gut.
Auf deiner Seite wird immer smooth gescrollt, auch beim ersten Seitenaufruf. Wie hast du das gemacht? ;)
Besten, vorweihnachtlichen Gruß,
Sebi
[Edit]
PS: habe jetzt eine dirty Lösung gefunden, habe eine Seite als Interne Weiterleitung vor der eigentlichen Seite eingefügt, die auf die eigentliche Seite leitet. Dadurch klappt es auch beim ersten Aufruf... Vielleicht weißt du aber eine bessere Lösung.
Ich habe da auch mal was kleines gebastelt um so etwas aus Artikeln automatisiert zu erstellen.
Die History-Api ist leider noch nicht eingebaut, aber vielleicht hilft es ja trotzdem wem.
https://github.com/psren/contao-magicArticleList
der sagt mir bei dem JS im Wiki immer:
wie darf ich das verstehen?Code:Uncaught TypeError: Object [object Window] has no method 'addEvent'
ohh, das lag wohl daran das ich mootools nachdem es in dem javascript bereich im Layout nicht funktioniert hatte wieder deaktivert hatte.
jetzt musste ich JQuery mit einbinden und hab das gleiche Problem wieder. Was kann ich machen das dies mit JQuery läuft außer einen anderen Slider zu verwenden?
nur für einen slider jQuery? oder nur für die spielerei mootools?
egal wie rum, beides unnötig :).
entweder anderen slider, oder die docked Geschichte auf jQuery umbauen oder mit noconflict() arbeiten.
vielleicht reichts auch, wenn du in dem js für die navigation alle $ durch document.id ersetzt. Aber nicht die $$.
Gruß
document.id hat ausgereicht vielen dank.
mootools slider müsste ich leider erst bauen, da die fertigen contao erweiterungne leider alle nicht responsive sind, zumindest zur aktuellen contao version.
ich hab 0 Ahnung von JQuery denkst du es lohnt sich für mich dies zu lernen und umzuschreiben um die paar kb zu sparen?
meld dich mal bei uns. wir haben da was (slider)
wie meinst du das?
Hi!
Danke für das Tutorial.
Habs bei meiner Seite auch eingebaut.
Eine Frage hätte ich noch:
Wenn die Seite "drei"-geteilt ist und im Container in der Mitte der Text steht, rechts das "Docked Navigation"-Menü mitfährt, wie kann ich links auch so etwas mitfahren lassen?
Welche Änderungen müsste ich am Skript durchführen?
Hab versucht einen weiteren div-Container zu nutzen, aber leider erfolglos. Vielleicht könntest Du mir da weiterhelfen. Thx.
Hallo
Gleich vorneweg ein dickes Sorry für meine Leichenschändung. Aber bevor ich einen neuen Thread erstelle, lasse ich lieber diesen Thread zu neuem Leben erwecken.
Ich bin neu hier und auch neu mit Cantao CMS unterwegs.
Habe vorher Jahrelang eigene HTML/CSS Webseiten geschrieben und irgendwann auf Wordpress umgestiegen.
Wordpress war mir aber zuviel herumgewurschtel und hat mich einfach nicht überzeugt.
Nun, ich bin sehr interessiert an dieser Möglichkeit für fixierte Headers.
Gerne möchte ich aber auch ein Zwei Zeiler Menü haben falls Notwendig.
Zbsp
Home
Anker 1 - Anker 2 - Anker 3
und falls mal ein Untermenü keinen Anker benötigt wie Kontakt (Bestehend aus einem Satz und einem Kontaktformular) Dann bleibt die 2. Zeile entweder leer oder verschwindet.
Ist dies Realisierbar? Leider hat Melzebub auf seiner Webseite: http://de.contaowiki.org/Docked_Navigation
Nichts mehr weiter geschrieben zum Thema Anker.
Ich könnte auch einfach 150€ investieren für ein fertiges Template dass genau meinen Vorstellungen entspricht. Aber selber erstellen macht halt mehr spass und fördert den Lerneffekt.
Herzlichen Dank für Antworten.
LG Rainer
Zwar alter Kram. Aber mittlerweile einfach per CSS position:sticky und top:0 zu lösen ;).
Nices Tutorial :cool:
Wäre vielleicht für die nicht so versierten User das:
in das zu ändern:HTML-Code:<ul>
<li class="dienste"><a href="#top">Dienstleistungen</a></li>
<li class="arbeiten"><a href="#arbeiten">Arbeitsbeispiele</a></li>
<li class="profil"><a href="#profil">Profil und Kontakt</a></li>
</ul>
HTML-Code:<div id="navi">
<ul>
<li class="dienste"><a href="#top">Dienstleistungen</a></li>
<li class="arbeiten"><a href="#arbeiten">Arbeitsbeispiele</a></li>
<li class="profil"><a href="#profil">Profil und Kontakt</a></li>
</ul>
</div>