CSS在IE9中动态改变位置答案

【问题标题】：CSS Changing Postition Dynamically in IE9CSS在IE9中动态改变位置
【发布时间】：2011-12-03 21:47:21
【问题描述】：

在 IE 9 及之前的版本中是否可以动态地将元素的位置样式从“绝对”动态更改为“固定”？

换句话说，我们希望一个元素在页面上垂直移动，直到它到达窗口顶部，然后在那个点固定它，这样它就不会再上升了？有意义吗？

【问题讨论】：

您想使用什么触发器？悬停，点击？我们需要更多信息！
请说明您是指使用 JavaScript、CSS 还是即时生成的内联样式。一个可能的选择是使用条件样式表，因为 IE 会选择它匹配的样式表，并为那些元素的位置包含一个覆盖，这些元素的类/选择器与您要更改的那些匹配。另一种选择是使用 Modernizr 之类的东西将类添加到 html 标记（或其他适当的标记），并在外部样式表中处理它们。后者可以与 jQuery（或其他库）一起使用，以在匹配元素上切换类或样式。可以扩展一下吗？
@MyStream - 更新了我的问题
这次更新大大改变了问题。
@Imran Omar Bukhsh — 然后我建议你找出失败的地方（事件未触发、变量未设置等），花几分钟时间在 Google 上找出 IE 是否存在该事件的问题/variable/etc，然后提出一个新问题（因为听起来您的所有问题都与条件有关，而不是与设置属性有关），其中包括您拥有的代码和您执行的调查。

标签： css

【解决方案1】：

您正在寻找的是一种根据另一个页内条件更改此值的方法。

我建议你需要类似的东西（使用 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');
  }
});

这是另一个您可以阅读的有用问题：

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

或Position of a div relative to the window?

并且有用于此的插件（例如查找“粘性侧边栏”）和一个很好的教程：http://designwoop.com/2011/01/how-to-create-a-jquery-sticky-sidebar/

【讨论】：

【解决方案2】：

它只适用于我的 IE 9 副本。

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

【讨论】：

@Imran Omar Bukhsh — 嗯，嗯，（a）问题说^W没有说要改回来，（b）它确实有效。
感谢您让我知道，帮助我意识到问题出在我的代码中的其他地方。 document.body.scrollTop 在 IE 中不起作用，jquery 修复了它

【解决方案3】：

使用 jQuery？ http://api.jquery.com/css/

【讨论】：