{"id":3128,"date":"2013-10-04T20:25:58","date_gmt":"2013-10-04T18:25:58","guid":{"rendered":"http:\/\/www.frische-zitronen.de\/?p=3128"},"modified":"2018-02-03T19:46:21","modified_gmt":"2018-02-03T17:46:21","slug":"so-baust-du-eine-scroll-to-fixed-navigation-in-contao-ein","status":"publish","type":"post","link":"https:\/\/www.jukemedia.de\/blog\/2013\/10\/so-baust-du-eine-scroll-to-fixed-navigation-in-contao-ein\/","title":{"rendered":"So baust du eine Scroll to fixed Navigation in Contao ein"},"content":{"rendered":"
\"Symbolhafte
Bei langen Inhalt – Scroll to fixed Navigation<\/figcaption><\/figure>\n

Besonders wenn es auf Webseiten viele Inhalte zu ver\u00f6ffentlichen gibt, kann es sehr st\u00f6rend sein, wenn die Navigation beim Scrollen aus dem Viewport verschwindet. Eine Scroll to fixed Navigation<\/strong>, bei der die Haupt- oder sonstige Men\u00fcleiste am oberen Bildschirmrand stehen bleibt ist aus meiner Sicht daher sehr benutzerfreundlich und insbesondere bei langen Seiten zu empfehlen.<\/p>\n

Auf Github gibt es ein hilfreiches Script zum Bau einer scroll to fixed Navigation
\nDownload hier<\/a><\/p>\n

So gehst du beim Einbau vor
\n<\/strong><\/h2>\n
    \n
  1. Lade das .zip herunter und entpacke es lokal auf deinem Rechner.<\/li>\n
  2. Erstelle einen Ordner (z.B. mit dem Namen „JS“) und \u00fcbertrage via FTP die Datei „jquery-scrolltofixed.js“<\/li>\n
  3. Gehe via Themes ==> in das f\u00fcr deine Seite aktive Seitenlayout und verlinke die Javascript-Datei bei zus\u00e4tzliche head-tags z.B. wie folgt:
    \n<script src=\"files\/js\/jquery-scrolltofixed.js\" type=\"text\/javascript\"><\/script><\/code>
    \nAchte darauf, dass der Pfad richtig angegeben ist!<\/li>\n
  4. Aktiviere jQuery im Seitenlayout. (Evtl. auf die Versionen achten)<\/li>\n
  5. Nun musst du noch das Skript aktivieren. Dazu gehst du in der Werkzeugleiste links zu „Templates“ und erstellst eine Kopie der zentralen Seitenvorlage fe_page.<\/li>\n
  6. Im heruntergeladenen .zip-Archiv findest du eine html-Datei „test.html“. \u00d6ffne diese Datei mit einem Text- oder html-Editor und kopiere die Zeilen 95 bis 136 in die Zwischenablage deiner Maus und f\u00fcge den Inhalt anschlie\u00dfend in die neue fe_page im head vor dem Ende des Head-Bereiches ein.<\/li>\n
  7. Jetzt musst du noch schauen, wie der Bereich, in der deine Hauptnavigation eingef\u00fcgt ist, hei\u00dft und die ID oder Klasse ermitteln. Sitzt die Naviagtion im #header und m\u00f6chtest du, dass der ganze #header am oberen Bildschirmrand gefixed wird, dann musst du in Zeile 102 die Id #test gegen #header oder .header ersetzen. M\u00f6chtest du, dass nur die Navigation gefixed wird, gibst du stattdessen die ID der Navigation an. Ich verwende in solchen F\u00e4llen gerne eigene Layoutbereiche wie z.B. #subheader und f\u00fcge hier nur die Navigation und nichts anderes ein.<\/li>\n
  8. Anschlie\u00dfend musst du nur noch die Gestaltung deiner Navigation im gefixten Zustand via CSS anpassen.<\/li>\n
  9. Das Ganze funktioniert auch, wenn du einen sticky-Footer haben m\u00f6chtest<\/li>\n<\/ol>\n

     <\/p>\n","protected":false},"excerpt":{"rendered":"

    Besonders wenn es auf Webseiten viele Inhalte zu ver\u00f6ffentlichen gibt, kann es sehr st\u00f6rend sein, wenn die Navigation beim Scrollen aus dem Viewport verschwindet. Eine Scroll-to-fixed Navigation, bei der die Haupt- oder sonstige Men\u00fcleiste am oberen Bildschirmrand stehen bleibt ist aus meiner Sicht daher sehr benutzerfreundlich und insbesondere bei langen Seiten zu empfehlen.<\/p>\n","protected":false},"author":1,"featured_media":4327,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,11],"tags":[93,389],"yst_prominent_words":[],"class_list":["post-3128","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","category-contao","tag-contao","tag-jquery"],"_links":{"self":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/comments?post=3128"}],"version-history":[{"count":12,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3128\/revisions"}],"predecessor-version":[{"id":4328,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3128\/revisions\/4328"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media\/4327"}],"wp:attachment":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media?parent=3128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/categories?post=3128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/tags?post=3128"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=3128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}