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

Question

Я создаю 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 может исчезнуть из верхней части окна просмотра браузера (да, я знаю, что установка его в положение: fixed будет делать то же самое, но тогда это скрыло бы содержимое ниже ActionBox, но все еще в меню).

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

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

Answer 1

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

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

ОБНОВЛЕНИЕ:

CSS

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

Сценарий

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);

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

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

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

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

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

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

Answer 5

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

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