13

$（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;
}

そして、IDが「ActionBox」（この場合はdiv）の要素を取ります。divは、横に並んだ左揃えのメニューに配置されているため、開始オフセットは約200ピクセルです）。目標は、ユーザーがブラウザのビューポートの上部からdivが消え始める可能性のあるポイントを超えてスクロールした後、margin-top値に追加を開始することです（そうです、positionに設定すると同じことができます。ただし、ActionBoxの下のコンテンツはわかりにくくなりますが、メニューには表示されたままになります）。

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

もう1つ、IE7とIE 6では期待どおりに機能します（すばらしいIETesterに感謝します）

4

5 に答える 5

13

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

  • 1 つの解決策は、CSS 定義に a を追加すること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");
    };
  });
});

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

parseInt($("#ActionBox").css("top"),10);
于 2010-02-23T22:34:09.160 に答える
1

答えが見つかりました！

この問題を解決するためのより良い方法を見つけようとする皆さんの努力に感謝したいのですが、残念ながら、一連のより大きな制約のために、それらを「答え」として選択することはできません (あなたはポイントに値するので、私はそれらに投票しています)貢献するため）。

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

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

これを示す更新されたパスビンを次に示します (このコードをどのように実装しているかを示すために、さらにスタイルを追加しました)。fudgey が話した IE の「コードを編集」してから「出力を表示」するバグはまだ発生しています (ただし、これは、pastbin (および同様のサービス) に固有のイベント バインディングの問題のようです)。

"float: right" を追加すると、IE8 が既に発生しているイベントの再描画を完了できるようになる理由はわかりませんが、何らかの理由でそうなります。

于 2010-02-24T18:05:00.763 に答える
1

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

$("#ActionBox").css("marginTop", foo);
于 2010-02-23T22:09:00.233 に答える
1

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

$("your id or class name").css({ 'margin-top': '18px' });
于 2016-08-22T08:36:56.020 に答える