Вопросы Теги

jQuery .css (“граничная вершина”, значение) не обновляющий в IE 8 (Режим Standards)

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

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

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

13
задан Jason Sperske 23 February 2010 в 22:04
поделиться

3 ответа

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

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

ОБНОВЛЕНО:

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);
13
ответ дан 1 December 2019 в 23:47
поделиться

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

$("#ActionBox").css("marginTop", foo);
1
ответ дан 1 December 2019 в 23:47
поделиться

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

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

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

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

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

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

1
ответ дан 1 December 2019 в 23:47
поделиться
Другие вопросы по тегам:

Похожие вопросы: