Sticky navigation - will nicht

  • Hi,


    ich bin am testen einer sticky navigation. Nun ist das problem das des nicht funktioniert.


    Habe heute begonnen mit jquery anzufangen villt, habe ich ja fehler drin.


    Anbei meine codes:





    Freue mich auf eure hilfe und was neues zu lernen


    Gruß,
    Stef

  • Hey,


    Ich habe ja da ein header und unter dem header ist dann die navigation.


    Ich möchte nun das wenn man bis nach dem header runtescrollt das dann die navigation den fixed zustand bekommt und mitgeht.


    Momentan bleibt die Nav aber stehen und geht nicht mit.


    EDIT: Nun funktioniert es. Mit folgendem Code :


    JavaScript
    <script>    	$(function() { var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;	var sticky_navigation = function(){    	var scroll_top = $(window).scrollTop();    	if (scroll_top > sticky_navigation_offset_top) {         	$('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });    	} else {        	$('#sticky_navigation').css({ 'position': 'relative' });     	}   	};	sticky_navigation();	$(window).scroll(function() {     	sticky_navigation();	}); });    	</script>



    Stef

  • Einige Probleme:


    Du hast jQuery nicht eingezogen.


    Sinnvolles Einrücken des Codes ist immer empfehlenswert, um ihn besser lesen und Strukturfehler erkennen zu können. Eingerückt (http://jsbeautifier.org/) sieht deiner so aus:
    https://jsfiddle.net/Sempervivum/g10otbtc/
    (Das Forum hat leider hartnäckig die Zeilenumbrüche verschluckt. Sieh es dir in diesem Fiddle an.)
    Man erkennt, dass eine schließende Klammer fehlt. So ist es richtig:

    JavaScript
    $(document).ready(function () {     var navi = $("#navigation"); //variable navi erstellen
         var ths = "top-head-scrolled"; //ths die class top-head-scrolled geben welche später dann über css angesprochen wird
         var hdr = $('header').height(); // hdr ist die höhe vom header
         $(window).scroll(function () {
             if ($(this).scrollTop() > hdr) { //wenn  der wert von scroll top höher ist als der von hdr
                 navi.addClass(ths); // füge klasse ths der var navi hinzu
             } else { //wenn nicht
                 navi.removeClass(ths); // entferne klasse ths 
             }
         });  });



    Die Variablen definierst Du außerhalb des document-ready. Da Du das Javascript im head einziehst, sind die entspr. Elemente noch nicht vorhanden. Richtig: siehe oben.


    Wenn Du position:fixed zuweist, ist der Selektor eine Klasse. Mit einer ID als Selektor wird außerdem position:relative zugewiesen. Das erste hat eine niedrigere Priorität als das zweite, deshalb wird das position:fixed nicht wirksam. Abhilfe, indem Du zusätzlich !important verwendest:

    CSS
    header,.top-head-scrolled {  position: fixed !important;  width: 100%;  top: 0; }


    Korrigiert man das alles, funktioniert es. Ich empfehle dir, dich mit den Developertools deiners Browsers vertraut zu machen, damit findet man solche Fehler relativ leicht.

    Der Übergang von normal zu fixed ist noch nicht reibungslos. Du kannst ja selber versuchen, das zu verbessern. Melde dich wieder, wenn Du keinen Erfolg hast.

  • Um jQuery zu verwenden, musst Du diese Bibliothek auf deiner Seite einbinden. Google nach "jquery einbinden" und den Developertools für deinen Browser.
    Auch der Grund dafür, dass dein Fiddle nicht läuft, ist, das Du jQuery nicht einbindest. Du kannst es in den Einstellungen (Zahnradsymbol) des Javascript-Teils einstellen.

  • Hi,


    Ups. Wusste es nicht. Danke der Info.


    Nun klappt es einigermaßen. Nun kann man wie du gesagt hast den übergang noch verfeinern.


    Mich nervt diese Leiste des Developertools in meinem browser...


    Stef

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!