jQuery Css ( „margin-top“, Wert) Aktualisieren nicht in IE 8 (Standard-Modus)

Question

Ich baue eine Auto-Follow div, die auf die $ (Fenster) .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 geht davon aus, dass es diese CSS-Regel vorhanden ist

#ActionBox {
  margin-top: 15px;
}

Und es braucht ein Element mit der ID „Aktionsbox“ (in diesem Fall ein div). Die div ist in einem linken Menü ausgerichtet positioniert ist, dass läuft an der Seite, so dass er Offset fängt ungefähr 200 Pixel ist). Das Ziel ist, indem auf den margin-top Wert zu starten, sobald der Benutzer über den Punkt hinaus gescrollt hat, wo die div beginnen könnte, die oben im Browser-Ansichtsfenster (ja ich weiß Einstellung in Stellung verschwinden aus: fixed würde das gleiche tun, aber dann wäre es um den Inhalt unter der Aktionsbox verschleiern, aber immer noch im Menü).

Nun ist die console.log zeigt, dass das Ereignis jedes Mal, feuert es sollte und es den richtigen Wert einstellen. Aber in einigen Seiten meines Web-App ist das div nicht neu gezeichnet. Dies ist besonders merkwürdig, weil in anderen Seiten (in IE) der Code wie erwartet funktioniert (und es funktioniert jedes Mal in FF, Opera und WebKit). Alle Seiten auswerten (0 Fehler und 0 Warnungen gemäß dem W3C-Validator und dem FireFox HTMLTidy Validator) und keine JS Fehler geworfen (nach dem IE Developer Toolbar und Firebug). Ein weiterer Teil dieses Rätsel, wenn ich die #ActionBox margin-top Regel im HTML-Style-Explorer in den IE-Entwicklertool abzuwählen dann die div springt sofort wieder in dem neu eingestellten Ort, die es haben sollte, wenn das Scroll-Ereignis ein erneutes Zeichnen ausgelöst hatte . Auch wenn ich IE8 in Quirks-Modus oder im Kompatibilitätsmodus zwingen dann die selbst löst ein Update.

Eine weitere Sache, es funktioniert wie erwartet in IE7 und IE 6 (dank den wunderbaren IETester für die)

Answer 1

ich habe ein Problem mit Ihrem Skript in Firefox. Als ich nach unten scrollen, setzt das Skript eine Marge auf der Seite hinzufügen und ich nie die unten auf der Seite erreichen. Dies geschieht, weil der Aktionsbox noch einen Teil der Seitenelemente ist. Ich stellte eine Demo hier .

• Eine Lösung wäre eine position: fixed auf die CSS-Definition hinzuzufügen, aber ich sehe das nicht funktionieren wird für Sie
• Eine andere Lösung wäre, die Aktionsbox zu positionieren absolut (auf dem Dokumentkörper) und die top einzustellen.
• Aktualisiert den Code mit der Lösung für andere zu Nutzen gefunden passen.

AKTUALISIERT:

CSS

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

Schrift

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

Auch ist es wichtig, eine Basis (10 in diesem Fall) zu Ihrem parseInt() hinzufügen, z.

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

Answer 2

Versuchen marginTop anstelle von margin-top, zum Beispiel:

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

Answer 3

fand ich die Antwort!

Ich mag die harte Arbeit aller erkennen bei dem Versuch, einen besseren Weg zu finden, um dieses Problem zu lösen, leider wegen einer Reihe von größeren Einschränkungen Ich bin nicht in der Lage, sich als „Antwort“ zu wählen (ich sie bin stimmen, weil Sie verdienen Punkte für den Beitrag).

Das spezifische Problem, das ich war mit Blick auf war ein JavaScript onScoll Ereignis, das Brennen wurde aber ein nachfolgendes CSS-Update, das nicht IE8 verursacht wurde (im Standardmodus) neu zu zeichnen. Noch seltsamer war die Tatsache, dass es in einigen Seiten neu gezeichnet wurde, während in anderen Ländern (ohne offensichtliche Ähnlichkeit) es nicht war. Die Lösung war am Ende der folgende CSS

hinzufügen

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

Hier ist eine aktualisierte pastbin zeigt diese (Ich habe etwas mehr Stil zu zeigen, wie ich bin der Umsetzung dieses Code). Der IE „bearbeiten Code“, dann „Ansicht Ausgabe“ Bug fudgey darüber gesprochen noch auftritt (aber es scheint ein Ereignis verbindlich Frage eindeutig pastbin (und ähnliche Dienstleistungen)

zu sein

Ich weiß nicht, warum das Hinzufügen „float: right“ ermöglicht IE8 ein erneutes Zeichnen auf einem Ereignis zu beenden, die bereits feuern, aber aus irgendeinem Grunde, es tut

.

Answer 4

Das richtige Format für IE8 ist:

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

mit dieser Arbeit.

Answer 5

versuchen, diese Methode

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