I've created a script that dynamically changes the positioning of a div element from static to fixed when the scroll bar reaches it. You can see this in action on my website here: example, where a floating video in the right column stays fixed as you scroll.
If you observe the example closely, you'll notice that as you scroll down, the video div with an ID of "#membership" glides down the page along with the content.
This is the code snippet responsible for achieving that effect:
$(window).scroll(function() {
if ($(window).scrollTop() > 157) {
$("#membership").css("position", "fixed");
var marginTop = $("#headerWrap").height();
$("#membership").css("top", "40px");
} else {
$("#membership").css("position", "static");
}
});
In addition to this functionality, there's also a JW player object included within the HTML structure.
To summarize: Whenever I change the position property of the containing div to position: fixed, the JW player seems to reset itself. I'm completely stumped on how to approach troubleshooting this issue. Strangely, everything works perfectly in Chrome on both OSX and Windows, as well as in Safari 3.
One peculiar observation worth mentioning is that the entire video blinks and appears to reload whenever the position property undergoes a change.