jQuery .css("margin-top", Wert) nicht aktualisieren im IE 8 (Standard-Modus)

Baue ich ein auto-follow div, die gebunden ist an die $(window).scroll () - Ereignis. 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");
    };
  });
});

Diesem code wird davon ausgegangen, dass es diese CSS-Regel in Kraft

#ActionBox {
  margin-top: 15px;
}

Und es nimmt ein element mit der id "ActionBox" (in diesem Fall ein div). Das div-Element positioniert ist, in ein linksbündiges Menü, das nach unten läuft die Seite, so ist es Startoffset rund 200 px). Das Ziel ist, starten Sie das hinzufügen, um den margin-top Wert, wenn der Anwender bereits gescrollt hat über den Punkt, wo die div beginnen zu verschwinden aus der Spitze des browser-viewport (ja ich weiß, wenn er auf position: fixed würde das gleiche tun, aber dann würde es verdecken den Inhalt unter die ActionBox, aber immer noch im Menü).

Nun die Konsole.Protokoll zeigt an, dass das Ereignis ausgelöst jedes mal, wenn es sollte, und es ist die Einstellung des richtigen Wertes. Aber in einigen Seiten in meinem web-app die div nicht neu gezeichnet. Dies ist besonders seltsam, weil in den anderen Seiten (im IE) der code wie erwartet funktioniert (und es funktioniert jedes mal in FF, Opera und WebKit). Alle Seiten bewerten (0 Fehler und 0 Warnungen gemäß der W3C-validator und der FireFox HTMLTidy Validator), und keine JS-Fehler ausgelöst werden (nach der IE-Developer-Toolbar und Firebug). Einen anderen Teil auf dieses Geheimnis, wenn ich deaktivieren Sie die #ActionBox margin-top in der Regel in den HTML-Style-explorer in den IE-Developer-Tools dann die div springt sofort wieder zurück in die neu justiert Ort, den es haben sollte, wenn das scroll-Ereignis ausgelöst hatten einen redraw. Auch wenn ich force IE8 in den Quirks-Modus oder compatibility-Modus dann auch ein update ausgelöst.

Eine Weitere Sache, es funktioniert wie erwartet im IE7 und IE 6 (Dank der wunderbaren IETester)

InformationsquelleAutor der Frage Jason Sperske | 2010-02-23

  1. 13

    Ich habe ein problem mit dem Skript in Firefox. Wenn ich nach unten scrollen, weiterhin das Skript fügen Sie einen Rand auf der Seite und ich erreichen nie das Ende der Seite. Dies geschieht, weil die ActionBox ist noch immer Teil der Seite Elemente. Ich habe eine demo hier.

    • Eine Lösung wäre, eine position: fixed an der CSS-definition, aber ich sehe dies nicht für Sie arbeiten
    • Eine andere Lösung wäre, die position der ActionBox absolut (auf das Dokument) und stellen Sie die top.
    • Aktualisiert, der code passt mit der gefundenen Lösung auch für andere zu nutzen.

    AKTUALISIERT:

    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, fügen Sie eine base (10 in diesem Fall) auf Ihrer parseInt() z.B.

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

    InformationsquelleAutor der Antwort Mottie

  2. 1

    Versuchen marginTop im Ort margin-topzB: 

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

    InformationsquelleAutor der Antwort Cheeso

  3. 1

    Ich die Antwort gefunden!

    Ich erkenne die harte Arbeit, die jeder bei dem Versuch, einen besseren Weg, um dieses problem zu lösen, leider wegen einer Serie von größeren Einschränkungen, ich bin nicht in der Lage zu wählen, Sie als die "Antwort" (ich Stimme Ihnen zu, weil Sie verdienen Punkte für einen Beitrag).

    Dem spezifischen problem, das ich konfrontiert war, war ein JavaScript-onScoll-event feuern, sondern eine nachfolgende CSS-update, das war nicht verursacht IE8 (im standards-Modus) neu zu zeichnen. Noch seltsamer war die Tatsache, dass in einigen Seiten war es nachzuziehen, während im anderen (mit keine offensichtliche ähnlichkeit) war es nicht. Die Lösung waren am Ende, fügen Sie den folgenden CSS -

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

    Hier ist eine aktualisierte pastbindie dies zeigen (ich habe etwas mehr Stil zu zeigen, wie ich die Umsetzung dieses Kodex). Der IE "code Bearbeiten" und dann "view output" Fehler fudgey gesprochen noch Auftritt (aber es scheint zu sein, eine Veranstaltung verbindlich Problem eindeutig auf pastbin (und ähnliche Dienste)

    Ich weiß nicht, warum das hinzufügen einer "float: right" ermöglicht IE8, komplett neu auf eine Veranstaltung, die bereits brennen, aber für einige Grund es das tut.

    InformationsquelleAutor der Antwort Jason Sperske

  4. 1

    Das richtige format für den IE8 ist:

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

    mit dieser Arbeit.

    InformationsquelleAutor der Antwort RckLN

  5. 1

    versuchen, diese Methode 

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

    InformationsquelleAutor der Antwort Farhan Dharsi

Schreibe einen Kommentar