jQuery .css ("margin-top", valeur) ne se met pas à jour dans IE 8 (mode Standards)

Je suis en train de construire un suivi automatique des div qui est lié à l' $(window).de défilement() de l'événement. Voici mon code 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 y a 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). La div est placé dans une aligné à gauche du menu qui s'exécute sur le côté, il est donc décalage de départ est d'environ 200 px). L'objectif est de commencer à ajouter pour le margin-top de la valeur une fois que l'utilisateur est déjà passé le point où la div pourrait commencer à disparaître en haut de la fenêtre d'affichage du navigateur (oui, je sais que le paramètre de position: fixe ferait la même chose, mais alors il serait occulter le contenu ci-dessous la ActionBox mais toujours dans le menu).

Maintenant la console.journal indique que l'événement est déclenché à chaque fois qu'il le devrait, et c'est le réglage de la valeur correcte. Mais dans certaines pages de mon application web la div n'est pas redessiné. C'est surtout bizarre parce que dans d'autres pages (dans IE) le code fonctionne comme prévu (et il travaille tout le temps dans FF, Opera et WebKit). Toutes les pages évaluer (0 erreurs et avertissements 0 selon le validateur du W3C et de l'FireFox HTMLTidy Validator), et pas de JS erreurs sont jetés (selon l'IE Barre d'outils du Développeur et Firebug). Une autre partie de ce mystère, si je désélectionner l' #ActionBox margin-top règle dans le code HTML de Style explorer dans internet explorer Outils de développement puis la div saute immédiatement en arrière de la nouvellement réglé place qu'elle devrait avoir si le défilement événement a déclenché une redessiner. Aussi, si je me force à IE8 en Mode Quirks, ou le mode de compatibilité puis la même déclenche une mise à jour.

Une chose de Plus, il fonctionne comme prévu dans IE7 et IE 6 (grâce à la merveilleuse IETester pour qu')

source d'informationauteur Jason Sperske

13

Je vais avoir un problème avec votre script dans Firefox. Quand je scroll vers le bas, le script continue à ajouter une marge à la page et je n'ai jamais atteindre le fond de la page. Cela se produit parce que le ActionBox est toujours partie des éléments de la page. J'ai posté un démo ici.
- Une solution serait d'ajouter un position: fixed pour le CSS définition, mais je vois que cela ne fonctionne pas pour vous
- Une autre solution serait la position de la ActionBox absolument (dans le corps du document) et d'ajuster la top.
- Mis à jour le code pour l'adapter à la solution trouvée pour les autres d'en 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");
    };
  });
});
```
Il est également important d'ajouter une base (10 dans ce cas) à votre parseInt()par exemple
```
parseInt($("#ActionBox").css("top"),10);
```
1

Essayer marginTop en place de margin-toppar exemple:
```
$("#ActionBox").css("marginTop", foo);
```
1

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, en raison d'une série de grandes contraintes auxquelles je suis incapable de les sélectionner comme la "réponse" (je vote jusqu'parce que vous le méritez points pour votre contribution).

Le problème, j'ai été confronté à été un JavaScript onScoll événement, qui était de tir, mais un autre CSS mise à jour qui n'était pas à l'origine de IE8 (en mode standard) pour redessiner. Encore plus étrange est le fait que, dans certaines pages, il était de redessiner tandis que dans d'autres (sans ressemblance évidente), il ne l'était pas. La solution est d'ajouter le code CSS suivant
```
#ActionBox {
 position: relative;
 float: right;
}
```
Ici est une mise à jour de pastbin montrant ce (j'ai ajouté un peu plus de style pour montrer comment je suis mise en œuvre de ce code). L'IE "modifier le code" puis "afficher la sortie d'un bug de la fudgey parlé persiste (mais il semble être un événement de liaison numéro unique pour pastbin (et des services)

Je ne sais pas pourquoi l'ajout de "float: right" permet IE8 pour compléter un redessiner sur un événement qui a déjà ouvert le feu, mais pour quelque raison il ne.

Le format correct pour IE8 est:

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

avec ce travail.

essayer cette méthode

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

Vous devez vous connecter pour publier un commentaire.