2

コンテンツ領域がウィンドウの上部から50pxになったら、固定ナビゲーションをフェードインさせようとしています。動作するようになりましたが、アニメーションで奇妙な「バウンス」が発生します。メニューが完全に表示された後、再び非表示になり、フェードインします。アイデアはありますか？これが私のコードです：

$(window).bind('scroll',function() {
    var vPos = $(window).scrollTop(); //The current scroll bar position
    var totalH = $('.content').offset().top; // Distance content from top
    var finalSize = totalH - vPos; // Get the difference of the distances

    console.log(finalSize);

    if( finalSize <= 50 ) {
        $('.sticky').fadeIn(300);       
    } else {
        $('.sticky').fadeOut(300);  
    }
});

それはここで見ることができます：http：//portfolio.stvartak.net/redesign

ありがとう！

4

2 に答える 2

1

フェージングを数回実行しないようにするには、フラグが必要なようです。

var flag=true;

$(window).on('scroll',function() {
    var vPos = $(window).scrollTop(),
        totalH = $('.content').offset().top,
        finalSize = totalH - vPos;

    if( finalSize <= 50)
        if (flag) $('.sticky').fadeIn(300);
        flag=false;
    } else {
        if (!flag) $('.sticky').fadeOut(300);  
        flag=true;
    }
});
于 2012-08-31T16:33:49.503 に答える
0

これを試して：

$(window).bind('scroll',function() {
    var vPos = $(this).scrollTop(); 
    var totalH = $('.content').offset().top;     
    if( totalH <= vPos ) {
        $('.sticky').stop().fadeIn(300);       
    } else {
        $('.sticky').stop().fadeOut(300);  
    }
});
于 2012-08-31T16:33:53.590 に答える