web-dev-qa-db-ja.com

jQuery .css（ "margin-top"、value）がIE 8（標準モード）で更新されない

$（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 pxです。目標は、ユーザーがdivがブラウザービューポートの上部から消え始める可能性のあるポイントを超えてスクロールしたら、margin-top値への追加を開始することです（はい、私はそれを位置に設定することを知っています：fixedは同じことをしますが、ただし、ActionBoxの下のメニューはまだ表示されます）。

現在、console.logは、イベントが必要なたびに発生し、正しい値を設定していることを示しています。しかし、私のWebアプリの一部のページでは、divは再描画されません。これは特に奇妙です（他のページ（IEの場合）でコードが期待どおりに機能するためです（また、FF、OperaおよびWebKit）で毎回機能します）。 W3CバリデーターおよびFireFox HTMLTidyバリデーター）、およびJSエラーはスローされません（IE開発者ツールバーおよびFirebugによる）。 IE Developer ToolsのHTMLスタイルエクスプローラーのmargin-topルール]の場合、divはスクロールイベントが再描画をトリガーした場合に必要な新しく調整された場所にすぐに戻ります。 IE8を強制的にQuirksモードまたは互換モードにすると、偶数が更新をトリガーします。

もう1つ、IE7およびIE 6（そのための素晴らしいIETesterに感謝します）

javascriptjqueryinternet-explorer-8ie-developer-tools
13
Jason Sperske

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

  • 1つの解決策は、CSS定義に_position: fixed_を追加することですが、これはあなたには機能しないことがわかります
  • 別の解決策は、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");
    };
  });
});
_

また、parseInt()にベース（この場合は10）を追加することも重要です。

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

margin-topの代わりにmarginTopを試してください。例：

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

この方法を試してください

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

IE8の正しい形式は次のとおりです。

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

この仕事で。

1
RckLN

答えが見つかりました！

残念ながら、一連の大きな制約のために、この問題を解決するためのより良い方法を見つけようとするすべての人の努力を認めたいと思います。それらを「答え」として選択することはできません。貢献するため）。

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

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

更新された pastbin がこれを示しています（このコードの実装方法を示すために、さらにスタイルを追加しました）。 IE「コードを編集」してから「出力を表示」というバグについてのファッジバグがまだ発生します（ただし、pastbin（および同様のサービス）に特有のイベントバインディングの問題のようです）

「float：right」を追加することでIE8が既に発生していたイベントで再描画を完了することができる理由はわかりませんが、何らかの理由でそれができます。

1
Jason Sperske