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/