滚动功能不火的动画正确

我有一个简单的.scroll()函数来触发一个事件，如果身体的.scrollTop()比规定值更高：滚动功能不火的动画正确

$(window).scroll(function() { 
    if($('body, html').scrollTop() > 250) { 
     console.log("higher"); 
     $('#navbar').animate({paddingTop: 5, paddingBottom: 5}, 'slow'); 
    } else { 
     console.log("lower"); 
     $('#navbar').animate({paddingTop: 25, paddingBottom: 25}, 'slow'); 
    } 
});

问题我有是，它触发每个滚动像素的功能。我只想根据scrollTop的值开火动画。

我该如何解决这个最好的方法？

感谢

来源

2014-10-28 supersize

滚动的每一个像素，你要么得到一个更高或更低。您的代码按预期工作。 – cforcloud 2014-10-28 14:53:56

@cforcloud是正确的，但我只是想检测'scrollTop'值，不会触发每个滚动像素上的动画。 – supersize 2014-10-28 14:54:54

你可以使用一个延迟来获取值，只有每x秒或scrollTop差异，以获得它每x像素 – Andi 2014-10-28 14:56:39

试试这个

var _top, _last_top = -1; 
$(window).scroll(function() { 
    _top = $('body, html').scrollTop(); 

    if(_top > 250 && _last_top < 250) { 
     _last_top = _top; 
     $('#navbar').animate({paddingTop: 5, paddingBottom: 5}, 'slow'); 
    } 

    if(_top < 250 && _last_top > 250) { 
     _last_top = _top; 
     $('#navbar').animate({paddingTop: 25, paddingBottom: 25}, 'slow'); 
    } 
});

来源

2014-10-28 15:03:05 cforcloud

感谢队友时它不会动画回来，效果很棒！ – supersize 2014-10-28 15:08:35

查看窗口版本。我真的不相信这在最新的Chrome中可以正常工作：/。 – Hless 2014-10-28 15:09:53

这是因为你来自body和功能html越来越scrollTop值。根据浏览器的不同，这会给你一些不可预知的结果。您只需要获得scrollTop的值body。

$(window).scroll(function() { 
    console.log($('body').scrollTop()); 
    if($('body').scrollTop() > 250) { 
     console.log("higher"); 
     $('#navbar').animate({paddingTop: 5, paddingBottom: 5}, 'slow'); 
    } else { 
     console.log("lower"); 
     $('#navbar').animate({paddingTop: 25, paddingBottom: 25}, 'slow'); 
    } 
});

http://jsfiddle.net/xxs82dsk/

编辑：显然得到的window解决问题的跨浏览器scrollTop值。在FF和Chrome对我来说：

$(window).scroll(function() { 
    console.log($(window).scrollTop()); 
    if($(window).scrollTop() > 250) { 
     console.log("higher"); 
     $('#navbar').animate({paddingTop: 5, paddingBottom: 5}, 'slow'); 
    } else { 
     console.log("lower"); 
     $('#navbar').animate({paddingTop: 25, paddingBottom: 25}, 'slow'); 
    } 
});

http://jsfiddle.net/ushopako/

来源

2014-10-28 14:58:17 Hless

我认为这是交叉浏览器所必需的！ Gecko使用与Webkit不同的元素来读取'body'的scrollTop。 – supersize 2014-10-28 15:01:50

试试吧。我的例子在最新的Chrome中按预期工作。它在Firefox中做了反对。你应该在Firefox中使用'html' ...不知道为什么。 FF版本：http://jsfiddle.net/xxs82dsk/2/ – Hless 2014-10-28 15:02:23

使用窗口而不是body或html。两者都很有魅力。 ;） – Hless 2014-10-28 15:07:25

随着拦截变量，这应该工作。

var animateOnce = false; 
$(window).scroll(function() { 
    if($('body, html').scrollTop() > 250) { 
     if(animateOnce == false) { 
      $('#navbar').animate({paddingTop: 5, paddingBottom: 5}, 'slow'); 
     } 
     animateOnce = true; 
    } else { 
     if(animateOnce == true) { 
      $('#navbar').animate({paddingTop: 25, paddingBottom: 25}, 'slow'); 
     } 
     animateOnce = false; 
    } 
});

来源

2014-10-28 15:02:27 Andi

'> 200'运行良好，但是当<200' – supersize 2014-10-28 15:09:29

滚动功能不火的动画正确

回答

相关问题