jQuery .css(“margin-top”, value) が IE 8 (標準モード) で更新されない

StackOverflow https://stackoverflow.com/questions/2321887

質問

$(window).scroll() イベントにバインドされた自動フォロー div を構築しています。これが私の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");
    };
  });
});

このコードは、この CSS ルールが設定されていることを前提としています。

#ActionBox {
  margin-top: 15px;
}

そして、「ActionBox」という ID を持つ要素 (この場合は div) を受け取ります。div は、横にある左揃えのメニューに配置されているため、開始オフセットは約 200 ピクセルです)。目標は、ユーザーがブラウザのビューポートの上部から div が消え始める可能性があるポイントを超えてスクロールしたときに、margin-top 値に追加を開始することです (はい、位置を設定することはわかっています:「fixed」でも同じことを行いますが、ActionBox の下にあるコンテンツがメニュー内に隠されてしまいます)。

これで、console.log には、必要なたびにイベントが発生し、正しい値が設定されていることが示されます。しかし、Web アプリの一部のページでは div が再描画されません。他のページ (IE の場合) ではコードが期待どおりに動作するため、これは特に奇妙です (FF、Opera、WebKit では常に動作します)。すべてのページが評価され (W3C バリデーターおよび FireFox HTMLTidy バリデーターによるとエラー 0 件、警告 0 件)、JS エラーはスローされません (IE Developer Toolbar および Firebug による)。この謎のもう 1 つの部分は、IE 開発者ツールの HTML スタイル エクスプローラーで #ActionBox のマージントップ ルールの選択を解除すると、スクロール イベントが再描画をトリガーした場合に配置されるはずだった新しく調整された場所に div がすぐに戻ってしまうということです。 。また、IE8 を強制モードまたは互換モードにすると、更新がトリガーされます。

もう 1 つ、IE7 と IE 6 では期待どおりに動作します (素晴らしい IETester に感謝します)。

役に立ちましたか？

解決

Firefox のスクリプトに問題があります。下にスクロールすると、スクリプトはページに余白を追加し続けますが、ページの下部に到達することはありません。これは、ActionBox がまだページ要素の一部であるために発生します。投稿しました デモはこちら.

  • 1 つの解決策は、 position: fixed CSS定義に準拠していますが、これはうまくいかないようです
  • 別の解決策は、ActionBox を絶対に (ドキュメント本文に対して) 配置し、 top.
  • 他の人が利益を得られるように見つかったソリューションに適合するようにコードを更新しました。

更新しました：

CSS

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

脚本

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

また、ベース (この場合は 10) を追加することも重要です。 parseInt(), 、例えば

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

他のヒント

例えば、marginTopの代わりにmargin-topを試してみてください。

$("#ActionBox").css("marginTop", foo);
の私は答えを見つけました！の

私は残念ながらので、私は「答え」としてそれらを選択することができません大きな制約の一連の、この問題を解決するためのより良い方法を見つけようとして全員のハードワークを認めるしたい（私はので、それらを投票していますあなたが）貢献のためのポイントに値します。

私が直面していた特定の問題が発射されたJavaScriptのonScollのイベントでしたが、（標準モードで）IE8を引き起こしていませんでした、その後のCSSの更新が再描画します。でも、他人は他人に（明らかな類似性）、それはなかったしながら、一部のページでは、それが再描画されたという事実でした。最終的に解決策は、以下のCSSを追加しました。

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

ここで pastbin の私がどのように表示するためにいくつかのより多くのスタイルを追加しました（これを示す更新されます私は）このコードを実装しています。 IE「編集コード」そして「ビュー出力」のバグfudgeyについてまだ）が発生した（イベントpastbinに固有の結合の問題（と同様のサービスのようです。

を話しました 追加なぜ私は知らない「フロート：右の」IE8はすでに発射されたイベントの再描画を完了することができますが、何らかの理由でそれはありません。

。

IE8の正しい形式は

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

この作品でます。

この方法を試してみてください 
$("your id or class name").css({ 'margin-top': '18px' });
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top