0

複数の div をスライドインまたはスライドアウトするボタンがあります。ボタンをクリックすると、ボタンがクリックされたときにウィンドウ内の同じ位置にとどまるようにしたいのですが、スライドする div がボタンの上の高さを変更するため、移動してしまいます (これがどのように見えるかを確認するには、フィドルを参照してください: http:/ /jsfiddle.net/fJWeQ/3/ )

私はアニメーションを見てきましたがscrollTop、びくびくしない方法でそれを使用する方法がわかりません. アニメーションの実行中にスクロール ウィンドウを要素に固定する方法はありますか?

ありがとう！

4

3 に答える 3

0

div を動的に変更すると、スクロールも調整されます。あなたの意図は、あなたが述べたようにボタンを固定したままにすることなので、そのように機能するようにフィドルを更新しました。

基本的positon:fixedにクリック時にボタンを作成します。もちろん、クリックを待たずに、CSS でボタンを固定することもできます。

于 2013-05-28T16:14:41.243 に答える
0

ステップ コールバック関数を使用してこれを修正することができましたが、これはせいぜい 1 ピクセルの揺れです。誰かがこれに出くわした場合に備えて、ちょっとした情報：

ステップ コールバック関数の使用方法の詳細については、こちらを参照してください。ステップ コールバック関数は、アニメーションの反復ごとに実行されます。

アニメーションの前:

holdSpot = this; //can set to whatever element you want to hold it at
topOfElement = $(holdSpot).offset().top;
topOfScroll = $(window).scrollTop();
effectiveHeight = topOfElement - topOfScroll;

ステップ関数 (アニメーションの反復ごとに実行):

topOfElement = $(holdSpot).offset().top; //finds new position of element
$(window).scrollTop(topOfElement - effectiveHeight); //sets scrollTop to position of element minus the original height difference
于 2013-06-03T17:19:04.113 に答える
0

少しぎくしゃくしていますが、これはあなたが構築できるかもしれない解決策です

http://jsfiddle.net/fJWeQ/5/

動いている間、現在のスクロール位置をポーリングし、ボタンがまだ同じ場所にあることを確認します。

var togglesInMotion = 0;
var buttonOffset;
var intervalHandler;
$(document).ready( function() { 
    $("#toggleButton").click(function(){        
        buttonOffset = $(this).offset().top - $(window).scrollTop();        
        intervalHandler = setInterval(function(){            

            var curOffset = $('#toggleButton').offset().top - $(window).scrollTop();        
            var adjustment = curOffset - buttonOffset;

            var currentScrollPosition = $(window).scrollTop();
            $(window).scrollTop(currentScrollPosition + adjustment);
            //$(window).scrollTop(0);
        });        
        togglesInMotion++;
        $('#div1').slideToggle("slow", stopScrolling);  
        togglesInMotion++;
        $('#div3').slideToggle("slow", stopScrolling);                  
    });    
});
function stopScrolling(){    
    togglesInMotion--;
    if(togglesInMotion == 0){
        clearTimeout(intervalHandler);        
    }
}
于 2013-05-28T16:42:07.053 に答える