Keep an SVG Object static while scrolling

Question

In my web application, I am generating a SVG file which contains a "header" that I would like to keep visible at the top of the window as the user scrolls down the image.

I can think of two ways of accomplishing this, but am looking for any other bright ideas. My two thoughts are:

• Generate two separate SVGs, one being the "header" and one being the content and then simply displaying them in two different HTML <div> elements, allowing the lower one to scroll. I don't like this idea because I would have to generate two separate documents.

• Utilise ECMAScript in the SVG itself and find a way to float the <g> that contains the header at the top of the page. I like this, because whenever the SVG is viewed it should work, but I am not sure how to accomplish this and would appreciate any pointers or examples.

Answer 1

I've got an example of the first case here:

footer {
    background: url(images/grasspat.svgz);
    height: 64px; width: 100%;
    position: fixed; left: 0; right: 0; top: auto; bottom:0;
}

The other case, which will of course require the client to have script enabled, and does flicker a bit (because of how it's done: scroll event > dom operation > repaint), a full example can be seen here.

Answer 2

Can't you just use CSS?

#header_id {
    position: fixed;
    top : 0;
 }

Edit

Sorry, I was thrown by the term object. I thought the svg WAS the header for another document. But I checked, and the W3C docs say you can apply CSS2 positioning to anything but the outer-most element. Let me know if it's as simple as my idea. I'd love to know.