0

問題の div は、このリンクの右側のサイドバーにある灰色のボックスです。

うまくスクロールしますが、止まりません。「お知らせ」の div に到達する直前に停止する必要があります。

ここに非常によく似た質問と一種の回答があることは承知していますが、チェックされておらず、機能させることができませんでした。

私はせいぜいjQueryの初心者なので、2歳のスタイルの回答に謙虚に感謝します。

スクロールする div をトリガーするコードは次のとおりです。

$(function () {

  var msie6 = $.browser == 'msie' && $.browser.version < 7;

  if (!msie6) {
    var top = $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0));
    $(window).scroll(function (event) {
      // what the y position of the scroll is
      var y = $(this).scrollTop();

      // whether that's below the form
      if (y >= top) {
        // if so, ad the fixed class
        $('#comment').addClass('fixed');
      } else {
        // otherwise remove it
        $('#comment').removeClass('fixed');
      }
        var newWidth = $('#comment').parent().width();
        $('#comment').width(newWidth);

    });
  }  
});
4

1 に答える 1

0

更新された回答

元のコードでオフセットを変更していたため、スクリプトは元のオフセットが何であったかを追跡できず、y常に equalctopになり、常に実行され(y>=ctop)、else ブロックがトリガーされることはありませんでした)。ctopこれは、スクロール中に #comment のオフセットを操作するときに元のオフセット値が失われないように、関数の外側でグローバル変数として定義することで解決されます。また、ネストされたifにelseブロックを追加して、下にスクロールしてから上にスクロールした後にオフセットがゼロにリセットされるようにしました（そうしないと、上部の#commentが切り取られることがあります）。次のコードは機能するはずです。もう一度、それがどうなるか、また質問があれば教えてください:)

$(document).ready(function() {
    ctop = $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0));
});
$(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();
    var abottom = $('#announcements').offset().top - parseFloat($('#announcements').css('margin-top').replace(/auto/, 0));

    // whether that's below the form
    if (y >= ctop) {
        // if so, ad the fixed class
        $('#comment').addClass('fixed');
        if (y > abottom-$('#comment').height()){
            $('#comment').offset({'top': abottom-$('#comment').height()-y});
        }
        else
        {
            $('#comment').offset({'top': 0 });
        }
    } else {
        // otherwise remove it
        $('#comment').removeClass('fixed');
    }
    var newWidth = $('#comment').parent().width();
    $('#comment').width(newWidth);

    });

元の回答

そこで、Chrome の JavaScript コンソールを使用して $(window).scroll イベントへのバインドを変更し、サイトを少しいじってみたところ、次のコードが機能するようです。コメント div を修正するのに十分なほどウィンドウがスクロールされると、スクロールの y 位置がアナウンス div が一番下にあるはずの場所にあるかどうかもチェックします。そうである場合は、アナウンス div の位置 + 画面サイズと現在のスクロール位置の差だけ、コメント div の位置を垂直方向にオフセットします (負の値が返され、コメント div が上に移動します)。これは、コピーして Chrome JavaScript コンソール (ctrl+shift+j) に貼り付けたコードで、動作しているように見えます。

$(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();
    var ctop= $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0));
    var abottom = $('#announcements').offset().top - parseFloat($('#announcements').css('margin-top').replace(/auto/, 0));

    // whether that's below the form
    if (y >= ctop) {
        // if so, ad the fixed class
        $('#comment').addClass('fixed');
        if (y > abottom-$('#comment').height()){
            $('#comment').offset({'top': abottom-$('#comment').height()-y});
        }
    } else {
        // otherwise remove it
        $('#comment').removeClass('fixed');
    }
    var newWidth = $('#comment').parent().width();
    $('#comment').width(newWidth);

    });

いくつかのメモ:
div が大きすぎてスクロールしないとページに収まらないため、(少なくとも私にとっては) コメント div の配置が奇妙です。これは、コーディングの問題というよりも設計の問題です。

top は window のプロパティなので、top を ctop に変更しtopました。コンソールでアクセスしようとすると、window オブジェクトの一部が返されます。

これがうまくいくかどうか教えてください:)

于 2013-05-24T03:46:39.363 に答える