Floating-Script korrekt einbauen

[blabla33]

Hallo,

ich versuche dieses Floating-Script (http://www.chukki.de/webentwicklung/jquery-floating-menu) auf meiner Seite (http://goo.gl/CL5aV) zu übernehmen. Ziel ist, dass die Navigationsleiste beim Scrollen immer am oberen Bildrand bleibt, d.h. der obere Teil mit dem Logo soll beim Scrollen verschwinden. Eben so, wie auf der Beispielseite.
Ich habe jetzt ganz am Ende der Seite das Script eingebaut. Im Header wird bereits jQuery aufgerufen, dennoch hat das Script keinen Effekt. Ich denke, ich habe da einen grundlegenden Fehler drin...

 

[threadi]

Wozu dieser Umstand? Du hast bereits unten einen fixiert positionierten Footer. Den Kopfbereich musst Du nur genauso positionieren, nur eben oben.

 

[blabla33]

Ich möchte aber nicht, dass der gesamte Header fixiert ist. D.h. es sollte so sein, dass zunächst der gesamte Header (also der Teil mit dem Logo und die Navigation) zu sehen ist, wenn gescrollt wird, wandert die Navigationsleiste bis an den Bildrand und bleibt dann dort fixiert. Klar, für die meisten ist das zu viel Aufwand für nix, aber ich finde das ganz nett und würde das eben gerne so umsetzen...

Wenn ich einfach den Header fixiere, dann ist der im gesamten fixiert und wenn ich nur die Navigationsleiste fixiere, dann ist die beim Scrollen an der falschen Stelle.

Bei diesem Script geht es letztlich ja einfach nur darum jQuery richtig aufzurufen und ich denke, dass genau da mein Problem liegt. Ich rufe das falsch auf...

 

[Gilles]

Jop. Ich denke ich weiß woran es liegt ;)
Alsooo.. Das hier ist dein Code

function () {
  $(document).ready(function () {
    $(window).scroll(function (event) {
    var y = $(this).scrollTop();
    var top = 30;
    if (y >= top) {
    $('#float').addClass('fixed');
    } else {
    $('#float').removeClass('fixed');
    }
  });
});
}

Da du daraus eine anonyme Funktion machst, die niemals aufgerufen wird, wird auch niemals der Code in der Funktion ausgeführt. Lass doch mal bitte das function(){} drumherum weg. Also so:

$(document).ready(function () {
    $(window).scroll(function (event) {
    var y = $(this).scrollTop();
    var top = 30;
    if (y >= top) {
    $('#float').addClass('fixed');
    } else {
    $('#float').removeClass('fixed');
    }
  });
});

So sollte das funktionieren :)

Kannst den Script Tag übrigens auch in den Kopf packen wenn du magst. Denn normalerweise packt man die Scripte nur unten in den body, da man dort weiß, dass alle Elemente schon geladen wurden.
Diese Abfrage passiert diesmal im Script selber durch $(document).ready(). Diese Variante ist meines Erachtens auch wesentlich besser, da man so alle Scripte an einem Ort sammelt :)

 

[blabla33]

Kannst du das lokal mal bei dir ausprobieren (die Pfade sind alle komplett angegeben, so dass du nichts runterladen musst)?
Bei mir funktioniert das nicht. Ich hatte das initial auch genauso gemacht, wie du das jetzt geschrieben hast. Allerdings bekomme ich im IE8 die Meldung
Meldung: Das Objekt unterstützt diese Eigenschaft oder Methode nicht.
Angegeben ist dann bereits die erste Zeile des Scripts.
Und das verstehe ich einfach nicht, da ja JQuery zuvor bereits geladen wurde.

 

[Gilles]

Kannst du das lokal mal bei dir ausprobieren (die Pfade sind alle komplett angegeben, so dass du nichts runterladen musst)?
Bei mir funktioniert das nicht. Ich hatte das initial auch genauso gemacht, wie du das jetzt geschrieben hast. Allerdings bekomme ich im IE8 die Meldung
Meldung: Das Objekt unterstützt diese Eigenschaft oder Methode nicht.
Angegeben ist dann bereits die erste Zeile des Scripts.
Und das verstehe ich einfach nicht, da ja JQuery zuvor bereits geladen wurde.

Ich weiss nun wieso. Die jQuery Version, die du lädst, enthält $ nicht als Synonym für jQuery. Somit kennt er $ nicht und sagt dir: "Böse böse"
Du hast nun 2 Möglichkeiten:
1.: Du lädst dir die neueste jQuery Version runter (Die Option, die ich dir empfehle)
2.: Du Änderst in deinem Script alle $ in jQuery um

Dann funktioniert das auch :)

 

[blabla33]

Wow. Vielen, vielen Dank. Ist wahrscheinlich banal gewesen, aber JavaScript ist wirklich nicht mein Bereich. Insofern wäre ich da nicht drauf gekommen.

 

[struppi]

Ich habe jetzt ganz am Ende der Seite das Script eingebaut. Im Header wird bereits jQuery aufgerufen, dennoch hat das Script keinen Effekt. Ich denke, ich habe da einen grundlegenden Fehler drin...

Ja, schau mal in die Fehlerkonsole:

Fehler: syntax error
Quelldatei: http://www.entwicklungshilfe.de/
Zeile: 198, Spalte: 9
Quelltext:
function () {

 

[blabla33]

Nur noch ein winziges Problemchen:
Wieso wird die Navigationsleiste beim Scrollen auf einmal um einige Pixel höher?
Einfach mal langsam nach unten Scrollen, dann sieht man den Sprung...

 

[Gilles]

Nur noch ein winziges Problemchen:
Wieso wird die Navigationsleiste beim Scrollen auf einmal um einige Pixel höher?
Einfach mal langsam nach unten Scrollen, dann sieht man den Sprung...

Geb .fixed auch mal eine height von 26px. Dann sollte es nicht mehr springen.
Liegt an dem Container-Verhalten. Die Wege des CSS sind unergründlich