1

ユーザーがスクロールするまで残りのコンテンツをたどる固定要素をページに配置しようとしています。

たとえば、Internet Explorer でhttp://jsfiddle.net/sVzfx/1/を試してみると、私の問題が表示されます (これは firefox では発生せず、opera では少し奇妙なことをします)。この jsfiddle では、スクロール イベントとコード行を使用して浮動要素を配置します。

$(window).scroll(function() {
    $("#floatingContent").css("top", Math.max(maxTopPosition, startingPoint - $(this).scrollTop()));
});

（これについては、特定のポイントで固定位置スクロールを停止するを参照してください）

=> スクロール イベントは、コンテンツがスクロールされた後に発生します。したがって、固定要素は少し遅れて続きます...

最高のユーザー エクスペリエンスを実現するには、そのような動作がないことが重要です。私の考えは、スクロールされているピクセル数を計算し、残りのコンテンツがスクロールされる前に要素を配置することです。ユーザーは、この要素が他の要素よりも前に配置されていることに気付かないでしょう。問題は、どうやってそれを行うのですか?!

マウスホイール プラグインを使用してみました ( http://brandonaaron.net/code/mousewheel/docsを参照)。スクロールされたピクセル数を決定するのではなく、実際のスクロールの前に何かを行うことができます...（deltaYパラメーターがそれを返すと思っていましたが、そうではありません）。

あなたならどうしますか？バツ（

たぶん、要素を相対的にして、ページの上部に到達したら固定に変更する必要があります...したがって、スクロールする前に移動することを忘れてください。

4

1 に答える 1

1

固定要素の代わりに相対要素を基礎として使用するというアイデアを得た後、この解決策を思いつきました。http://jsfiddle.net/sVzfx/7/を参照してください。

var fixedElement = false;
var changingMoment = 250; // numbers of pixels from top where we want to fix or unfix
$(window).scroll(function() {
    // floatingContentMark lets us know where the element shall change 
    // from fixed to relative and vice versa
    var distanceFromTop = $("#floatingContentMark").offset().top - $(this).scrollTop();    
    if ((distanceFromTop <= changingMoment && !fixedElement) || 
        (distanceFromTop >= changingMoment && fixedElement)) 
    {    // either we came from top or bottom, same event triggered
         fixedElement = !fixedElement;
         $('#floatingContent').trigger('fixElement');
    }
});

// maybe dispatch in two different handlers, fix and unfix.
$('#floatingContent').bind('fixElement', function() {
    if ($(this).css('position') != 'fixed') {
        $(this).css('position', 'fixed') ;
        $(this).css('top', changingMoment ) ;
    }
    else {
        $(this).css('position', 'relative') ;
        $(this).css('top', 'auto') ;
    }
}) ;

別の解決策はhttp://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/です

于 2013-03-06T21:38:51.247 に答える