如何暂停页面内的内容？

Question

我想要一个特定的内容停止一个特定的内容，一旦滚动击中该部分。它只会在满足特定条件时进行滚动（即草图，点击该div内的内容等）。

您是如何做到这一点的？有任何想法吗？谢谢。

Answer 1

您可以通过在文档滚动上绑定处理程序并调用e.preventDefault（）来防止默认的滚动操作。

这里，contentPos是你想停止滚动的y位置，它与$（document）.scrollTop（）进行比较。

$(document). 
    bind('mousewheel DOMMouseScroll', function (e) { 

     contentYPos = 500; 
     conditionMet = false; 

     if ($(document).scrollTop() >= contentYPos 
      && conditionMet == false 
      && e.originalEvent.wheelDelta < 0) { 

       e.preventDefault(); 
     } 
    }); 

这将检查您的conditionMet是假的，如果用户向下滚动（想必你想要的窗口仍然能够向上滚动），直到满足条件，将忽略该行为。

这里是在这方面的工作一个js小提琴：http://jsfiddle.net/cMKh2/

编辑：包括其上触发窗口滚动一个更全面的版本。 （包括这两种方法以供比较）。

http://jsfiddle.net/cMKh2/2/

EDIT2：最终版本与条件通过按下按钮，和动态滚动距离改变。

http://jsfiddle.net/cMKh2/4/