问题
I would like to animate the background-position CSS property of the <body> tag using skrollr.js. I want it to slightly move the background image up as the page scrolls to give it a little spice. However, using this...
data-0="background-position: 0px 0px;" data-1000="background-position: 0px -250px;"
...isn't working.
I tried using a <div> to accomplish the feat (animating its background-position), but that doesn't give me the effect I am looking for. When I animate the background-property of the <div>, the background-position works correctly; but once the <div> scrolls out of sight, whatever is behind the div become visible, which I don't want. Any suggestions?
回答1:
Okay, I figured out what was causing the issue. I had my CSS written like this:
background: url(/images/mainBG.jpg) no-repeat center fixed!important;
I needed to remove the "!important" and it worked like a charm. But... Now I've noticed another issue (Which I will post the answer here if I get resolved). I am implementing this into a 4.0 C# .net website with MasterPages (see this in action here: brugrill.ntxdesigns.com). Considering that all of the .aspx pages will be of different lengths, I can't use the skrollr.js within the MasterPage as it sets the height of the pages based off of what you put in the "data-" property so if the page is longer than the pixel position of the "data-" property (say the page is 5000 pixels and the property of the "data-" is 1000) the background scrolling stops before the page is finished scrolling. If the "data-" property is longer than the pixel length of the page, the page keeps scrolling after it should have stopped which looks bad (as you can see by my link above). I am hoping I can use the codebehind with a this.Page.Master.FindControl to find the body control tag and modify the "data-" properties to the values I need.
Is there a way through javascript, jquery or otherwise to get the current pixel length of the page and use that value in the "data-" property? Then I wouldn't have to hardcode this data and if the page grows, the value grows. Any suggestions would be great!
来源：https://stackoverflow.com/questions/24223797/animating-the-body-background-using-css-and-skrollr-js