Question

一旦我的内容区域距窗口顶部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

谢谢！

Answer 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;
    }
});

Answer 2

试试这个：

$(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);  
    }
});

jQuery：当滚动过某个点时，fadeIn固定导航

2 个答案: