jQuery .css ( “margin-top”, value) non aggiornare in IE 8 (modalità standard)

Question

Sto costruendo un div auto-seguire che è legato all'evento $ (window) .scroll (). Ecco il mio 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");
    };
  });
});

Questo codice presuppone che ci sia questa regola CSS al posto

#ActionBox {
  margin-top: 15px;
}

E ci vuole un elemento con l'id "ActionBox" (in questo caso un div). Il div viene posizionato in un menu allineato a sinistra che corre lungo il lato, quindi è offset iniziale è di circa 200 px). L'obiettivo è quello di iniziare ad aggiungere al valore margin-top una volta che l'utente ha fatto scorrere oltre il punto in cui il div potrebbe iniziare a scomparire la parte superiore della finestra del browser (sì lo so impostandolo a position: fixed farebbe la stessa cosa, ma allora sarebbe oscurare il contenuto al di sotto del ActionBox ma ancora nel menu).

Ora la console.log mostra che l'evento è sparare ogni volta che si deve e sta impostando il valore corretto. Ma in alcune pagine del mio web app il div non viene ridisegnato. Questo è particolarmente strano perché in altre pagine (in IE) il codice funziona come previsto (e funziona ogni volta in FF, Opera e WebKit). Tutte le pagine valutano (0 errori e 0 avvertimenti secondo il validatore del W3C e la FireFox HTMLTidy Validator), e nessun JS errori sono gettati (secondo lo sviluppatore IE Toolbar e Firebug). Un altro parte a questo mistero, se io deselezionare la regola margin-top #ActionBox in stile HTML Explorer nella Developer Tools IE quindi il div salta subito indietro nel posto di recente regolato che dovrebbe avere se l'evento di scorrimento aveva innescato un ridisegno . Anche se forzo IE8 in modalità quirks mode o compatibilità poi innesca anche un aggiornamento.

Una cosa di più, funziona come previsto in IE7 e IE 6 (grazie al meraviglioso IETester per questo)

Answer 1

Sto avendo un problema con lo script in Firefox. Quando ho scorrere verso il basso, lo script continua ad aggiungere un margine alla pagina e non ho mai raggiungere la parte inferiore della pagina. Ciò si verifica perché l'ActionBox è ancora parte degli elementi della pagina. Ho pubblicato un demo qui .

• Una soluzione potrebbe essere quella di aggiungere un position: fixed alla definizione CSS, ma vedo questo non funziona per voi
• Un'altra soluzione potrebbe essere quella di posizionare l'ActionBox assolutamente (al corpo del documento) e regolare il top.
• Aggiornato il codice per adattarsi con la soluzione trovata per gli altri a beneficiare.

AGGIORNAMENTO:

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

Inoltre è importante aggiungere una base (10 in questo caso) al vostro parseInt(), per es.

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

Answer 2

Prova marginTop al posto di margin-top, ad esempio:

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

Answer 3

Ho trovato la risposta!

Voglio riconoscere il duro lavoro di tutti nel tentativo di trovare un modo migliore per risolvere questo problema, purtroppo, a causa di una serie di vincoli più grandi non sono in grado di scegliere loro come la "risposta" (io li voterò a causa vi meritate punti per aver contribuito).

Il problema specifico che stavo affrontando è stato un evento JavaScript onScoll che stava sparando, ma un aggiornamento CSS successiva, che non stava causando IE8 (in modalità standard) per ridisegnare. Ancora più strano è il fatto che in alcune pagine è stato ridisegnare mentre in altri (senza evidenti similarità) non è stato. La soluzione alla fine è stato quello di aggiungere il seguente CSS

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

Questa è una versione aggiornata pastbin che mostra questo (ho aggiunto un po 'di stile per mostrare come io sono l'attuazione di questo codice). L'IE "codice di modifica", quindi "vista l'uscita" bug fudgey parlato si verifica su ancora (ma sembra essere un problema di evento vincolante unica per pastbin (e servizi analoghi)

Non so perché l'aggiunta di. "Float: right" permette IE8 per completare un ridisegnare su un evento che è stato già sparando, ma per qualche ragione lo fa

Answer 4

Il formato corretto per IE8 è:

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

con questo lavoro.

Answer 5

provare questo metodo

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