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

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

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


javascript jquery internet-explorer-8 ie-developer-tools
person Jason Sperske    schedule 23.02.2010    source источник
comment
какая версия jquery?   -  person ericvg    schedule 24.02.2010
comment
jQuery 1.4.1 (загружено с ajax.googleapis.com /ajax/libs/jquery/1.4.1/jquery.min.js)   -  person Jason Sperske    schedule 24.02.2010
comment
Я только что обновился до 1.4.2, но ошибка все еще сохраняется так же, как и с 1.4.1.   -  person Jason Sperske    schedule 24.02.2010
comment
разве это не должно быть $(#ActionBox).css(marginTop ..   -  person mkoryak    schedule 24.02.2010
comment
Напоминает мне об ошибке "т.е. исчезающий контент"   -  person meouw    schedule 24.02.2010

Ответы (5)


arrow_upward
13
arrow_downward

У меня проблема с вашим скриптом в 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);
person Mottie    schedule 23.02.2010
comment
Я обновил код в вашей демонстрации (который показал проблему в FF), чтобы лучше соответствовать тому, как я использую этот div. Вот ссылка pastebin.me/6e3cf10ff24f4e1cf20d79384a8d4f64 - person Jason Sperske; 24.02.2010
comment
Это очень странно, похоже, это работает в IE при первой загрузке страницы. Но если я просмотрю код и вернусь к экрану вывода просмотра, он перестанет работать. Я пробовал тестировать код на jsbin и получил похожие результаты... Кажется, у меня все отлично работает, когда он не в корзине, или, может быть, я не понимаю, чего вы пытаетесь достичь. - person Mottie; 24.02.2010
comment
если вы обновите свой ответ, чтобы показать комбинированное исправление CSS и javascript с верхним полем, я выберу его как правильный ответ. - person Jason Sperske; 24.02.2010
comment
Готово... это просто показывает, сколько дополнительной работы нам всем нужно сделать, чтобы все заработало с IE :( В любом случае, я рад, что вы получили свой ответ! - person Mottie; 25.02.2010

arrow_upward
1
arrow_downward

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

$("#ActionBox").css("marginTop", foo);
person Cheeso    schedule 23.02.2010
comment
Атрибуты CSS с верблюжьим корпусом все еще работают, но не вызывают перерисовку, которую я ищу. - person Jason Sperske; 24.02.2010

arrow_upward
1
arrow_downward

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

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

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

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

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

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

person Jason Sperske    schedule 24.02.2010

arrow_upward
1
arrow_downward

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

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

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

person RckLN    schedule 10.12.2013

arrow_upward
1
arrow_downward

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

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