jQuery/javascript: Hintergrundbild, ändert sich beim Scrollen

Question

Ich werde dies vorwegnehmen, indem ich sage, dass ich ein Anfänger bin und mein Code wahrscheinlich unheimlich chaotisch und/oder unzusammenhängend ist, aber ich werde es trotzdem posten und hoffen, dass diese Fehler abgefangen werden können.

Ich habe ein paar Tage lang nach Antworten und Lösungen für dieses Problem gesucht und bin auch auf dieses Thema gestoßen, in dem jemand genau die gleiche Frage gestellt hat: http://goo.gl/BwLzp (die als zu vage angesehen werden), also werde ich so gründlich sein, wie ich es kann.

Was ich bisher habe, ist eine Kombination aus ein paar Tutorials und Auszügen von hier:

---

Das Konzept: (Eine große Anzahl von Bildern wird vorgeladen und als Hintergrundbilder eingestellt. Theoretisch ändert sich für jede ganze Zahl, die gescrollt wird (scrollTop), das Hintergrundbild entsprechend).

Alle Bilder sind grundsätzlich benannt: imgname1.jpg, imgname2.jpg, imgname3.jpg usw. Der "imgname" ist also mit der scrollTop-Nummer gepaart.

Und hier ist, was ich habe nur in Bezug auf die Scrollen (nicht die Preload):

$(function getPos() {
    var Pos = $(window).scrollTop();  // "Pos = scrollTop and is added onto imgname
return Pos;
}); 

$(function() {

$(window).scroll(function() { //Defines that this function will be triggered as the scrollbar is moving 

    var image_url = 'http://www.examplehost.com/imgname' + Pos + '.jpg'

    if (getPos()>1) { //If the vertical position of scrollbar is above 1 display imgname + Pos + .jpg (ex: imgname30.jpg) and add to url

        $("body").css('background-image', image_url);                            
    }

    else { //If the vertical position of scrollbar is at 1 display start image
        $("body").css('background-image', url("http://www.examplehost.com/imgname/0.jpg");
    }

});

}); //function ends

Ich weiß nicht, was das für ein Durcheinander ist, und ja, ich werde die Grundlagen auffrischen, denn in meinem Kopf ist es logisch, aber ich bin mir sicher, dass es völlig falsch ist. Für dieses Projekt beschränken sich meine Kenntnisse jedoch darauf, Folgendes zu vermuten/zu fragen:

• Brauche ich ein Komma nach meinem "}", wenn die Funktionen enden. z.B: },
• Ist alles richtig geöffnet und geschlossen.
• Genau so sieht meine js-Datei aus, und es würde mich nicht überraschen, wenn es ein Problem gäbe, dass Funktionen falsch aufgerufen werden.
• Außerdem möchte ich anstelle von if (getPos()>1) if (getPos()>=1) verwenden

Zusätzliche Informationen, die helfen/zu mehr Klarheit führen können, Ziel ist es, dass die Bildposition unverändert bleibt und bei jedem Bildlaufschritt ein neuer "Rahmen" entsteht. Letztlich würde ich zentrieren + halten die Bilder Vollbild wie: http://www.powersmart.ca/

Ich danke Ihnen, dass Sie dies überhaupt gelesen haben, und entschuldige mich, falls ich gegen eine Regel verstoßen habe oder falls diese Frage/dieses Dilemma bereits irgendwo ausführlich gelöst wurde, das ich nicht finden konnte.

Abgesehen davon, was denken Sie?

Answer 1

Versuchen Sie, dies zu ändern:

if (getPos()>1) { //If the vertical position of scrollbar is above 1 display imgname + Pos + .jpg (ex: imgname30.jpg) and add to url

    $("body").css('background-image', image_url);                            
}
else { //If the vertical position of scrollbar is at 1 display start image
    $("body").css('background-image', url("http://www.examplehost.com/imgname/0.jpg");
}

zu:

if (getPos()>1) { //If the vertical position of scrollbar is above 1 display imgname + Pos + .jpg (ex: imgname30.jpg) and add to url

    $("body").css('background-image', 'url('+image_url+')');                            
}
else { //If the vertical position of scrollbar is at 1 display start image
    $("body").css('background-image', 'url(http://www.examplehost.com/imgname/0.jpg)');
}

Answer 2

Um die Position des Hintergrundbildes unverändert zu lassen, müssen Sie object.style.backgroundAttachment="fixed"

mit Jquery zu tun:

$("body").css('background-attachment', 'fixed');

Allerdings würde ich vorschlagen, dies in Ihr css zu setzen

body { 
    background-attachment: fixed;
}

http://www.w3schools.com/cssref/pr_background-attachment.asp

Google ist dein Freund ;)

---

EDIT: Es stellt sich nur eine Frage: Sind Sie sicher, dass die Bilder die richtige URL haben? Wenn die URLs falsch sind, gibt es überhaupt keinen Hintergrund.

Answer 3

function getPos() {
    var Pos = $(window).scrollTop();
    return Pos;
}
$(function() {
      $(window).scroll(
       function() {
        var here=getPos();
        //alert(here);
        $("body").css('background-image', url('http://www.examplehost.com/imgname' + here + '.jpg')); 
      })
});

Beginnen Sie damit, aber Sie bräuchten ein Bild pro Pixel...