web-dev-qa-db-fra.com

jQuery .css ("margin-top", valeur) non mis à jour dans IE 8 (mode standard)

Je construis un div suivi automatique qui est lié à l'événement $ (window) .scroll (). 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 que cette règle CSS est en place

#ActionBox {
  margin-top: 15px;
}

Et il faut un élément avec l'id "ActionBox" (dans ce cas, un div). La div est positionnée dans un menu aligné à gauche qui coule sur le côté, donc son décalage de départ est d’environ 200 px). Le but est de commencer à ajouter à la valeur margin-top une fois que l'utilisateur a fait défiler le point où la div pourrait commencer à disparaître en haut de la fenêtre du navigateur (oui, je sais que le placer sur position: fixed ferait la même chose, mais alors cela obscurcirait le contenu sous l'ActionBox mais toujours dans le menu).

À présent, le fichier console.log montre que l'événement se déclenche à chaque fois qu'il le devrait et qu'il définit la valeur correcte. Mais dans certaines pages de mon application Web, la div n'est pas redessinée. Ceci est particulièrement étrange car dans d'autres pages (dans IE), le code fonctionne comme prévu (et il fonctionne à chaque fois dans FF, Opera et WebKit). Toutes les pages sont évaluées (0 erreur et 0 avertissements selon le validateur W3C et le validateur FireFox HTMLTidy), et aucune erreur JS n'est générée (selon la barre d'outils de développeur IE et Firebug). Une autre partie de ce mystère, si je désélectionne la règle #ActionBox margin-top dans l'explorateur de styles HTML dans les outils de développement IE, la div revient immédiatement à la place nouvellement ajustée qu'elle devrait avoir si l'événement de défilement avait déclenché un rafraîchir. De plus, si je force IE8 en mode Quirks ou en mode de compatibilité, cela déclenche une mise à jour.

Encore une chose, cela fonctionne comme prévu dans IE7 et IE 6 (merci à IETester pour cela)

javascriptjqueryinternet-explorer-8ie-developer-tools
13
Jason Sperske

J'ai un problème avec votre script dans Firefox. Lorsque je fais défiler l'écran vers le bas, le script continue d'ajouter une marge à la page et je n'atteins jamais le bas de la page. Cela est dû au fait que l'ActionBox fait toujours partie des éléments de la page. J'ai posté une démo ici .

  • Une solution serait d’ajouter un position: fixed à la définition CSS, mais je vois que cela ne fonctionnera pas pour vous.
  • Une autre solution serait de positionner absolument l’ActionBox (dans le corps du document) et d’ajuster la top.
  • Mise à jour du code pour l'adapter à la solution trouvée afin que d'autres puissent en bénéficier.

MIS À JOUR:

CSS

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

Scénario

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

De plus, il est important d’ajouter une base (10 dans ce cas) à votre parseInt(), par exemple.

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

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

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

essayez cette méthode 

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

Le format correct pour IE8 est:

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

avec ce travail.

1
RckLN

J'ai trouvé la réponse!

Je tiens à reconnaître le travail acharné de chacun pour tenter de trouver une meilleure façon de résoudre ce problème. Malheureusement, à cause d'une série de contraintes plus importantes, je ne parviens pas à les sélectionner comme "réponse" (je les vote parce que vous méritez des points. pour contribuer).

Le problème spécifique que je rencontrais était un événement JavaScript onScoll qui se déclenchait, mais une mise à jour CSS ultérieure qui ne provoquait pas le redessin d'IE8 (en mode standard). Encore plus étrange était le fait que dans certaines pages, il était redessiné alors que dans d'autres (sans similitude évidente), ce n'était pas le cas. La solution à la fin a été d’ajouter le CSS suivant

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

Voici une mise à jour de pastbin montrant ceci (j'ai ajouté un peu plus de style pour montrer comment j'implémente ce code). Le bogue fudgey dont il est parlé dont le code IE "éditer le code" se produit toujours (mais cela semble être un problème de liaison d'événement unique à pastbin (et à des services similaires)

Je ne sais pas pourquoi l'ajout de "float: right" permet à IE8 de terminer un redessin sur un événement déjà déclenché, mais pour une raison quelconque, il le fait.

1
Jason Sperske