4

Lets say I have a background image, a fixed header image with transparent parts, a content div with a semi-transparent background and dynamic height in a traditional header/content/footer layout.

The effect I'm trying to achieve: scrolling background and content under a fixed header (with content hidden and background showing).

I've read a bunch of related topics, such as Hide Scrolling Content Under Transparent Header etc. But they deal with situations where the background can be fixed too. Mine has to be scrollable.

I managed to get what I need by adding the same background image to a wrapper div of the header image div and scrolling it with jQuery .scrollTop() on window scroll event.

Reference: jsbin Example
Reference: jsFiddle Example

The problem of this method is pretty bad sync (some lag, tearing) in all browsers not named Firefox.

To clarify: The height of content will be dynamic. 10000px I just picked for the example. I expect it to reach that quite often though, sometimes more (AJAX feeds), and on some pages it can be close to 0. That's why I'm syncing .height() too. Keep in mind that footer div at the bottom is under the content div.

And I think there has to be a better way. Any suggestions?

Community
  • 1
  • 1
Bo Liao
  • 49
  • 4
  • see if `$('#header').animate({scrollTop: s}, 0);` is better in terms of performance in IE and other, i can't test it. – Alex Ball Jul 02 '12 at 07:41
  • @AlexBall Thanks for the suggestion, tried it, but the result seems to be the same as with `$('#header').scrollTop(s);`. – Bo Liao Jul 02 '12 at 13:59
  • 1
    @arttronics Sorry for not making myself clear, I briefly mentioned in my question that the height of content will be dynamic. 10000px I just picked for the example. I expect it to reach that quite often though, sometimes more (Ajax feeds), and on some pages can be close to 0. That's why I'm syncing `.height()` too, although maybe there's a better way to do it. About content reaching the bottom, not sure what you mean, but have in mind that footer has to be at the bottom too. – Bo Liao Jul 02 '12 at 14:05
  • @BoLiao, I've added that your comment to clarify the SO Question a bit more. You can now delete that comment which is now obsolete. This comment will soon be deleted as well. Thanks. – arttronics Jul 02 '12 at 20:36

1 Answers1

0

Couldn't you just use a positioned scroll pane or scroll area to scroll your dynamic content, simply positioning it right under your fixed header?

Systembolaget
  • 2,514
  • 2
  • 21
  • 37