it-swarm.com.de

jQuery .css ("margin-top", value) wird nicht aktualisiert IE 8 (Standardmodus)

Ich baue ein Auto-follow-Div, das an das $ (window) .scroll () -Ereignis gebunden ist. Hier ist mein 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");
    };
  });
});

Dieser Code setzt voraus, dass diese CSS-Regel vorhanden ist

#ActionBox {
  margin-top: 15px;
}

Und es braucht ein Element mit der ID "ActionBox" (in diesem Fall ein div). Das div befindet sich in einem links ausgerichteten Menü, das an der Seite nach unten verläuft. Der Startversatz beträgt also etwa 200 px. Das Ziel ist es, den Margin-Top-Wert zu erhöhen, sobald der Benutzer über den Punkt hinausgefahren ist, an dem das div möglicherweise aus dem oberen Bereich des Browser-Ansichtsfensters verschwindet (ja, ich weiß, wenn Sie es auf position setzen): dann würde es den Inhalt unterhalb der ActionBox aber noch im Menü verdecken).

Nun zeigt die console.log, dass das Ereignis jedes Mal ausgelöst wird, wenn es sollte und der richtige Wert festgelegt wird. Auf einigen Seiten meiner Web-App wird das Div jedoch nicht neu gezeichnet. Dies ist besonders merkwürdig, da der Code auf anderen Seiten (in IE) wie erwartet funktioniert (und in FF, Opera und WebKit jedes Mal funktioniert). Alle Seiten werden ausgewertet (0 Fehler und 0 Warnungen gemäß dem W3C-Validator und dem FireFox HTMLTidy-Validator), und es werden keine JS-Fehler ausgegeben (gemäß der IE Developer Toolbar und Firebug). Ein weiterer Teil dieses Rätsels: Wenn ich die #ActionBox-Margin-Top-Regel im HTML-Style-Explorer in den IE Developer Tools abwählen, springt das div sofort an die neu eingestellte Stelle zurück, die das Scroll-Ereignis haben sollte hatte eine Neuzeichnung ausgelöst. Auch wenn ich IE8 in den Quirks-Modus oder in den Kompatibilitätsmodus zwinge, löst das sogar ein Update aus.

Eine weitere Sache, es funktioniert wie erwartet in IE7 und IE 6 (Dank an den wundervollen IETester dafür)

13
Jason Sperske

Ich habe ein Problem mit Ihrem Skript in Firefox. Wenn ich nach unten scrolle, fügt das Skript der Seite weiterhin einen Rand hinzu, und ich komme nie an den unteren Rand der Seite. Dies tritt auf, weil die ActionBox noch Teil der Seitenelemente ist. Ich habe hier eine Demo gepostet .

  • Eine Lösung wäre, der CSS-Definition einen position: fixed hinzuzufügen, aber ich sehe, dass dies für Sie nicht funktioniert
  • Eine andere Lösung wäre, die ActionBox absolut (zum Dokumenthauptteil) zu positionieren und die top anzupassen.
  • Der Code wurde an die Lösung angepasst, die für andere von Nutzen ist.

AKTUALISIERTE:

CSS

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

Skript

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

Es ist auch wichtig, Ihrer parseInt() eine Basis (10 in diesem Fall) hinzuzufügen, z.

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

Versuchen Sie marginTop anstelle von margin-top, zB: 

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

probiere diese Methode 

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

Das korrekte Format für IE8 ist:

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

mit dieser Arbeit.

1
RckLN

Ich habe die Antwort gefunden!

Ich möchte die harte Arbeit aller anerkennen, die versuchen, einen besseren Weg zu finden, um dieses Problem zu lösen. Leider kann ich sie aufgrund einer Reihe größerer Einschränkungen nicht als "Antwort" auswählen (ich stimme ihnen zu, weil Sie Punkte verdienen.) für einen Beitrag).

Das spezifische Problem, vor dem ich stand, war ein JavaScript-Ereignis onScoll, das ausgelöst wurde, aber ein nachfolgendes CSS-Update, bei dem IE8 (im Standardmodus) nicht neu gezeichnet wurde. Noch seltsamer war die Tatsache, dass es auf einigen Seiten neu gezeichnet wurde, während es auf anderen Seiten (ohne offensichtliche Ähnlichkeit) nicht war. Die Lösung am Ende bestand darin, die folgende CSS hinzuzufügen

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

Hier ist ein aktualisiertes pastbin , das dies zeigt (ich habe etwas mehr Stil hinzugefügt, um zu zeigen, wie ich diesen Code implementiere). Der IE "Edit Code" und dann "View Output" -Fehler, über den Fudgey immer noch spricht, tritt jedoch immer noch auf (scheint jedoch ein Event-bindendes Problem zu sein, das nur für Pastbin (und ähnliche Dienste) gilt

Ich weiß nicht, warum das Hinzufügen von "Float: Right" dazu führt, dass IE8 ein erneutes Zeichnen eines Ereignisses abschließt, das bereits ausgelöst wurde, aber aus irgendeinem Grund ist dies der Fall.

1
Jason Sperske