Question

最近，我一直在一个网站上工作，我想在不同的滚动位置拍摄特定的效果。我正在使用Velocity JS进行动画。有一个元素，我希望自动滚动到另一个特定的滚动位置。使用Velocity JS可以轻松实现这一点。下面是说明案例的代码：

$(window).scroll(function(){
   if($(window.scrollTop() > 100)
  {$('#element').velocity('scroll',{duration: 1000, offset:500});}
});

所以现在当滚动位置超过100时，元素将自动滚动到500的偏移量。现在的问题是，一旦动画执行，滚动就会卡住并变得不稳定。所以问题是，如何摆脱这个问题？为什么会这样？有没有其他方法来实现我想要的？这是一个解释问题的小提琴：

http://jsfiddle.net/zubairanwar2/65xCP/58/

我使用速度Js相当新，所以请建议我并帮助我。谢谢！

Answer 1

好吧，我从jQuery本身找到了解决方案。而不是像这样调用函数：

$(window).scroll(function(){
  if($(window).scrollTop() > 100 && $(window).scrollTop() < 500) // > 100 AND    < 500
 {$('#element').velocity('scroll',{duration: 1000, offset:500});}
});

我们可以使用$(document).one('scroll',function(){});。它的作用是它最多运行一次这个功能。所以上面的代码可以重写为：

$(window).scroll(function(){
  if($(window).scrollTop() > 100) 
 {  
    $(document).one('scroll',function(){
         $('#element').velocity('scroll',{duration: 1000, offset:500});
   });

  }
});

这就是迄今为止我得到的解决方案，它就像一个魅力。如果此代码有任何问题或者您想添加更多内容，请评论。干杯！

Answer 2

以下是您的意见，我的意见可以帮助您了解正在发生的事情（如果您还没有）：

$(window).scroll(function(){ //when you scroll...
   if($(window).scrollTop() > 100) //if you are > 100 px from the top of the page...
  {$('#element').velocity('scroll',{duration: 1000, offset:500});} // scroll to 500
});

滚动到500像素时，距离顶部超过100像素，对吗？因此，每次滚动时，它都会滚动回500.

以下是您的问题的解决方案：只需更改if语句，以便仅在实际需要时触发速度：

$(window).scroll(function(){
   if($(window).scrollTop() > 100 && $(window).scrollTop() < 500) // > 100 AND < 500
  {$('#element').velocity('scroll',{duration: 1000, offset:500});}
});

如果您希望能够从500向上滚动，则将其更改为更小但仍然大于100的内容，例如120.

PS你的代码中有一个语法错误，但正如你所说它部分有效我认为这是一个错字..但无论如何它是$(window.scrollTop()错过了{{1}的结束括号}};即window

.velocity（＆＃34; scroll＆＃34;）如果在$ window.scroll（）函数中使用，则无法正常工作

2 个答案: