CSS Changing Postition Dynamically in IE9

Question

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?

What trigger do you want to use? Hover, click? We need more info! — Kyle, Oct 09 '11 at 10:24
Please specify if you mean using JavaScript, CSS or inline styles generated on-the-fly. A possible option is to use conditional stylesheets, since IE will pick up the ones it matches, and include an override for the position for those elements with the classes/selectors matching the ones you want to change. Another option is to add classes to the html tag (or other appropriate tag) using something like Modernizr and handle it all in external stylesheets. The latter could be used with jQuery (or other libraries) to toggle a class or style on the matching elements. Could you expand please? — MyStream, Oct 09 '11 at 10:27
@Quentin - already made it to work on chrome but its not working on ie — Imran Omar Bukhsh, Oct 09 '11 at 10:49
@Imran Omar Bukhsh — Then I suggest you find out where it fails (event not firing, variable not set, etc), spend a few minutes with Google finding out if IE has a problem with that event/variable/etc, and then ask a new question (since it sounds like all you issues are with the conditions and not with setting the property) which includes that code you have and the investigation you've performed. — Quentin, Oct 09 '11 at 10:51
@ImranOmarBukhsh Please see if my answer below provides any useful directions for you? — MyStream, Oct 09 '11 at 10:52

score 1 · Accepted Answer · answered Oct 09 '11 at 10:34

1

It just works in my copy of IE 9.

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

answered Oct 09 '11 at 10:34

Quentin

914,110
126
1,211
1,335

@Imran Omar Bukhsh — Umm, well (a) the question says^Wsaid nothing about changing it back, and (b) it does work. – Quentin Oct 09 '11 at 10:44
thanx for letting me know, helped me realize the problem was somewhere else in my code. document.body.scrollTop was not working in IE and jquery fixed it – Imran Omar Bukhsh Oct 09 '11 at 10:56

score 1 · Answer 2 · edited May 23 '17 at 12:27

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/

score 0 · Answer 3 · answered Oct 09 '11 at 10:24

0

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

answered Oct 09 '11 at 10:24

Ross Deane

3,100
2
19
25

CSS Changing Postition Dynamically in IE9

3 Answers3