JQuery.css( "margin-top", value), не обновляющийся в IE 8 (режим стандартов)

Я создаю div для автоматического перехода, привязанный к событию $(window).scroll(). Вот мой JavaScript.

var alert_top = 0;
var alert_margin_top = 0;

$(function() {
  alert_top = $("#ActionBox").offset().top;
  alert_margin_top = parseInt($("#ActionBox").css("margin-top"));

  $(window).scroll(function () {
    var scroll_top = $(window).scrollTop();
    if(scroll_top > alert_top) {
      $("#ActionBox").css("margin-top", ((scroll_top-alert_top)+(alert_margin_top*2))+"px");
      console.log("Setting margin-top to "+$("#ActionBox").css("margin-top"));
    } else {
      $("#ActionBox").css("margin-top", alert_margin_top+"px");
    };
  });
});

Этот код предполагает, что существует это правило CSS

#ActionBox {
  margin-top: 15px;
}

И он принимает элемент с идентификатором "ActionBox" (в данном случае div). Div расположен в выровненном слева меню, которое проходит сбоку, поэтому начальное смещение составляет приблизительно 200 пикселей). Цель состоит в том, чтобы начать добавлять к значению margin-top, когда пользователь прокручивается мимо точки, где div может исчезнуть с верхней части окна просмотра браузера (да, я знаю, что он устанавливает ее в положение: фиксированное будет делать то же самое, но затем он будет скрывать содержимое ниже ActionBox, но все же в меню).

Теперь console.log показывает, что событие срабатывает каждый раз, когда оно должно и оно устанавливает правильное значение. Но на некоторых страницах моего веб-приложения div не перерисовывается. Это особенно странно, потому что на других страницах (в IE) код работает как ожидалось (и он работает каждый раз в FF, Opera и WebKit). Все страницы оценивают (0 ошибок и 0 предупреждений в соответствии с W3C валидатором и FireFox HTMLTidy Validator), и никакие ошибки JS не выбрасываются (в соответствии с IE Developer Toolbar и Firebug). Еще одна часть этой тайны, если я отменил выбор верхнего правила #ActionBox в проводнике HTML Style в IE Developer Tools, тогда div сразу же вернется в новое скорректированное место, которое должно было произойти, если событие прокрутки вызвало перерисовку, Кроме того, если я заставляю IE8 работать в режиме Quirks или в режиме совместимости, то даже триггеры обновляют.

Еще одна вещь, она работает так, как ожидалось, в IE7 и IE 6 (благодаря замечательному IETester для этого)

Ответы

Ответ 1

У меня проблема с вашим script в Firefox. Когда я прокручиваю вниз, script продолжает добавлять маржу к странице, и я никогда не дойду до нижней части страницы. Это происходит потому, что ActionBox по-прежнему является частью элементов страницы. Я разместил здесь .

  • Одним из решений было бы добавить position: fixed в определение CSS, но я вижу, что это не сработает для вас.
  • Другим решением было бы установить ActionBox абсолютно (в тело документа) и настроить top.
  • Обновлен код в соответствии с решением, найденным для других.

ОБНОВЛЕНО:

CSS

#ActionBox {
 position: relative;
 float: right;
}

Script

var alert_top = 0;
var alert_margin_top = 0;

$(function() {
  alert_top = $("#ActionBox").offset().top;
  alert_margin_top = parseInt($("#ActionBox").css("margin-top"),10);

  $(window).scroll(function () {
    var scroll_top = $(window).scrollTop();
    if (scroll_top > alert_top) {
      $("#ActionBox").css("margin-top", ((scroll_top-alert_top)+(alert_margin_top*2)) + "px");
      console.log("Setting margin-top to " + $("#ActionBox").css("margin-top"));
    } else {
      $("#ActionBox").css("margin-top", alert_margin_top+"px");
    };
  });
});

Также важно добавить базу (10 в этом случае) к вашему parseInt(), например.

parseInt($("#ActionBox").css("top"),10);

Ответ 2

Попробуйте marginTop вместо margin-top, например:

$("#ActionBox").css("marginTop", foo);

Ответ 3

Я нашел ответ!

Я хочу признать тяжелую работу каждого, пытаясь найти лучший способ решить эту проблему, к сожалению, из-за ряда больших ограничений я не могу выбрать их как "ответ" (я голосую за них, потому что вы заслуживаете очков за вклад).

Конкретной проблемой, с которой я столкнулся, было событие JavaScript onScoll, которое запускалось, но последующее обновление CSS, которое не вызывало перерисовки IE8 (в режиме стандартов). Еще незнакомцем был тот факт, что на некоторых страницах он перерисовывался, а в других (без видимого сходства) это не так. В итоге решение было добавить следующий CSS

#ActionBox {
  position: relative;
  float: right;
}

Вот обновленный pastbin, показывающий это (я добавил еще несколько стилей, чтобы показать, как я реализую этот код), IE "редактирование кода", а затем "просмотр вывода" ошибка fudgey, о которой идет речь, все еще происходит (но, похоже, это проблема привязки события, уникальная для pastbin (и подобных сервисов)

Я не знаю, почему добавление "float: right" позволяет IE8 завершить перерисовку события, которое уже запускалось, но по какой-то причине оно делает.

Ответ 4

Правильный формат для IE8:

  $("#ActionBox").css({ 'margin-top': '10px' });

с этой работой.

Ответ 5

попробуйте этот метод

$("your id or class name").css({ 'margin-top': '18px' });