jQuery/javascript: background-image, changes on scroll

Question

I'll preface this by saying I am a beginner and my code is probably hillariously messy and/or incoherent, but I'll post it anyway hoping those errors can be caught.

I've searched for a couple days for answers and solutions to this, I also located this topic of someone asking the exact same question here: http://goo.gl/BwLzp (deemed to vague) so I'll be as thorough as I know how to be.

What I have so far, is a combination of a few tutorials and excerpts from here:

---

The concept: (A large amount of images will be pre-loaded and set as background images. In theory, for every whole number that is scrolled (scrollTop), the background image changes accordingly.)

All the images are basically named: imgname1.jpg, imgname2.jpg, imgname3.jpg etc. So the "imgname" is paired with the scrollTop number.

And here is what I have regarding only the scrolling (not the 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

I don't know how much of a mess that is and yes I'll be brushing up on the basics, since it is logical in my mind but completely wrong I'm sure. For this project however my knowledge only limits me to guessing/wondering the following:

• Do I need a comma after my "}" when the functions end. ex: },
• Is everything opened and closed properly.
• This is exactly how my js file looks and I wouldn't be surprised if there was an issue of functions being called incorrectly.
• Also instead of if (getPos()>1) I would like to use if (getPos()>=1)

Extra info that may help/further clarification, the goal is the image position remains still, and a new "frame" takes over with each scrolling increment. Ultimately, I would center + keep the images full screen such as: http://www.powersmart.ca/

Thank you for even reading this and I apologize if I broke a rule or if this question/dilemma has been solved in further detail somewhere I could not locate.

That said, thoughts?

Answer 1

try changing this:

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");
}

to:

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

To make "background image position remain still" you need object.style.backgroundAttachment="fixed"

to do with jquery:

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

Though I would suggest putting this in your css

body { 
    background-attachment: fixed;
}

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

Google is your friend ;)

---

Just brings up one thing, are you sure the images are of correct url? 只是提出一件事，您确定图像是正确的url吗？ If the URLs are wrong, it will results in no background at all.

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')); 
      })
});

start with this. but you would need one image per pixel...