1

Just had some awesome help from a SO user regarding this question:

jQuery on window scroll animate background image position

As you can see here I wanted to scroll a divs background image incrementally when a user scrolls the page. See this for working version:

http://jsfiddle.net/nicklansdell/HFxVj/4/

The answer given works perfectly. However as well being able to scroll the page with the browsers scroll bar I also want to include some extra functionality that scrolls the page to a divs hash position when an anchor(s) is clicked. I am using the scrollTo plugin to achieve this which worked perfectly until I included the following CSS:

body, html {
    height: 100%;
    min-height: 100%;
}

Unfortunately if I include this the page scrollTo animation doesn't work but including it allows the background image position animation to work, it seems to be one or the other, but of course I need both :-) Can anyone suggest a workaround here? Many thanks in advance.

EDIT*

I have narrowed my problem down a little. The problem is not to do with the body,html being set to height 100%. It is down to giving the #page div a physical height. It requires a height of 100% for the background image scroll but requires no height to be specified for the scrollTo to work. Please see my JSFiddle http://jsfiddle.net/nicklansdell/HFxVj/4/ update and play around with the #page styling to see what I mean.

Community
  • 1
  • 1
mtwallet
  • 5,040
  • 14
  • 50
  • 74
  • I can't see the animation code in the fiddle. On the other hand - I don't see any content in the Html area either. Am I supposed to see that? – Niklas Wulff Feb 22 '11 at 12:09
  • @Niklas Sorry about that I was playing around with the code and took all the scrollTo references out. I have put them back in and also narrowed down the problem please see my edit above. – mtwallet Feb 22 '11 at 13:19
  • Sorry, but I don't really have any ideas for now, best of luck to you! – Niklas Wulff Feb 22 '11 at 15:09

3 Answers3

1

Are you using $.scrollTo('selector-for-target-element', time); for doing the scrolling? for this syntax, either of HTML of body needs to have height auto. I had similar issue and i resolved by explicitly mentioning the parent div which needed to be scrolled.

$('parent-div-selector').scrollTo('selector-for-target-element', time);
instead of 
$.scrollTo('selector-for-target-element', time);

and it worked.

Hope it helps.

Alfred
  • 21,058
  • 61
  • 167
  • 249
Ranjan
  • 448
  • 3
  • 13
0

Just a longshot - have you tried to apply the css to either body or html, instead of both of them?

only body:

body { 
height: 100%;
min-height: 100%;
}

only html:

html { 
height: 100%;
min-height: 100%;
}
Niklas Wulff
  • 3,497
  • 2
  • 22
  • 43
-2

Only apply the height to body, not html.

user3880247
  • 61
  • 2