CSS Changing Postition Dynamically in IE9

Is there anyway to change the position style of an element dynamically from 'absolute' to 'fixed' dynamically in IE 9 and before?

In other words开发者_开发百科 we want an element to move vertically on the page till a point when it would reach at the top of the window and then at that point make it fixed so it wont just go up anymore? Makes sense?

It just works in my copy of IE 9.

document.getElementById('foo').style.position = 'fixed';

What you're looking for is a way to change this value based on another in-page condition.

I'd suggest what you need is something akin to this (using jQuery):

var targetElement = $('#your-fixed-absolute-element');
var togglePixelY = 100; // change to suit your needs
$(window).bind('scroll resize',function(){
  if($(this).css('scrollTop') <= togglePixelY && !targetElement.hasClass('absolute')) {
     targetElement.addClass('absolute').removeClass('fixed');
  } else if($(this).css('scrollTop') > togglePixelY && !targetElement.hasClass('fixed')) {
     targetElement.addClass('fixed').removeClass('absolute');
  }
});

Here is another useful question you can read up on:

Get current scroll position and pass it as a variable with a link?

or Position of a div relative to the window?

and there are plugins for this (look for 'sticky sidebar' for example) and a nice tutorial for it here: http://designwoop.com/2011/01/how-to-create-a-jquery-sticky-sidebar/

Using jQuery? http://api.jquery.com/css/