jQuery Css ( « margin-top », value) non mise à jour dans IE 8 (mode Standards)

Question

Je construis une div auto-suivi qui est lié à l'événement .scroll () $ (fenêtre). Voici mon 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");
    };
  });
});

Ce code suppose qu'il ya cette règle CSS en place

#ActionBox {
  margin-top: 15px;
}

Et il faut un élément avec l'id « ActionBox » (dans ce cas, un div). Le div est positionné dans un menu de gauche alignés qui court sur le côté, il est donc décalage de départ est d'environ 200 px). L'objectif est de commencer à ajouter à la valeur marge supérieure lorsque l'utilisateur a fait défiler passé le point où la div pourrait commencer à disparaître du haut de la fenêtre du navigateur (oui je sais le mettre en position: fixe serait faire la même chose, mais il obscurcir le contenu en dessous du ActionBox mais toujours dans le menu).

Maintenant, le console.log montre que l'événement tire à chaque fois qu'il doit et il est le réglage de la valeur correcte. Mais dans certaines pages de mon application web de la div n'est pas redessinée. Cela est particulièrement étrange parce que dans les autres pages (dans IE) le code fonctionne comme prévu (et cela fonctionne à chaque fois dans FF, Opera et WebKit). Toutes les pages évaluer (0 erreurs et 0 avertissements selon le validateur du W3C et le validateur HTMLTidy FireFox), et aucune erreur de JS sont jetés (selon la barre d'outils IE Developer et Firebug). Une autre partie de ce mystère, si je désélectionné la règle margin-top #ActionBox dans l'explorateur de style HTML dans les outils de développement IE puis le div revient immédiatement à la place nouvellement réglée qu'elle devrait avoir si l'événement de défilement a déclenché un nouveau tracé . Aussi, si je force IE8 en mode Quirks mode ou la compatibilité puis déclenche même une mise à jour.

Encore une chose, il fonctionne comme prévu dans IE7 et IE 6 (grâce au merveilleux IETester pour cela)

Answer 1

Je suis un problème avec votre script dans Firefox. Quand je défiler vers le bas, le script continue d'ajouter une marge à la page et je n'atteindre le bas de la page. Cela se produit parce que le ActionBox fait toujours partie des éléments de la page. J'ai posté un démo ici .

• Une solution serait d'ajouter un position: fixed à la définition CSS, mais je vois cela ne fonctionnera pas pour vous
• Une autre solution serait de placer le ActionBox absolument (au corps du document) et régler la top.
• Mise à jour le code pour s'adapter à la solution trouvée pour les autres de bénéficier.

MISE À JOUR:

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

En outre, il est important d'ajouter une base (10 dans ce cas) à votre parseInt(), par exemple.

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

Answer 2

Essayez marginTop à la place de margin-top, par exemple:

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

Answer 3

J'ai trouvé la réponse!

Je tiens à souligner le travail acharné de tout le monde en essayant de trouver une meilleure façon de résoudre ce problème, malheureusement, à cause d'une série de contraintes plus grandes que je suis incapable de les sélectionner comme la « réponse » (je les vote parce que vous méritez des points pour sa contribution).

Le problème spécifique que je faisais face était un événement onScoll JavaScript qui a été mise à feu, mais une mise à jour ultérieure CSS qui n'a pas été à l'origine IE8 (en mode standards) pour redessiner. Plus étrange encore est le fait que dans certaines pages, il a été redessine alors que dans d'autres (sans similitude évidente) il n'a pas été. La solution à la fin était d'ajouter le CSS suivant

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

Voici une mise à jour pastbin montrant ce (j'ai ajouté un peu plus de style pour montrer comment J'application de ce code). Le « code d'édition » IE puis « Sortie de vue » bug Fudgey parlé se produit encore (mais il semble être un problème de liaison événement unique à pastbin (et des services similaires)

Je ne sais pas pourquoi ajouter. « Float: right » permet IE8 d'achever un nouveau tracé sur un événement qui a été mise à feu déjà, mais pour une raison Finalité

Answer 4

Le format correct pour IE8 est:

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

avec ce travail.

Answer 5

essayer cette méthode

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