基于滚动的动画在定义区域之外工作

所以我是JS的新手。 我试图让滚动动画只在指定区域工作，但我的“position：fixed”标签使它出现在我的网站顶部并一直滚动它而不是动画开始和仅在其定义的框架中工作。

我有什么想法可以解决这个问题？

这就是它的样子（这是钢铁侠头盔，请原谅未完工的网站）： http ： //frontlinecreative.co/test-page/

这是我正在使用的代码：

$(document).ready(function() { //variable for the 'stroke-dashoffset' unit var $dashOffset = $(".path").css("stroke-dashoffset"); //on a scroll event - execute function $(window).scroll(function() { //calculate how far down the page the user is var $percentageComplete = (($(window).scrollTop() / ($("html").height() - $(window).height())) * 100); //convert dashoffset pixel value to interger var $newUnit = parseInt($dashOffset, 10); //get the value to be subtracted from the 'stroke-dashoffset' var $offsetUnit = $percentageComplete * ($newUnit / 100); //set the new value of the dashoffset to create the drawing effect $(".path").css("stroke-dashoffset", $newUnit - $offsetUnit); }); }); 

 svg { position: fixed; margin: auto; top: 0; left: 0; right: 0; bottom: 0; width: 50%; max-width: 580px; max-height: 440px; display: block; } .path { stroke-dashoffset: 2000; stroke-dasharray: 2000; } .frame { height: 3000px; width: 100%; display: block; } 

说我被卡住会是轻描淡写。

谢谢！

Answer 1

SVG内容不在“frame”div中。 将结束标记从第一行代码移动到最后一行。

Answer 2

我认为这个问题的答案使用jQuery来保持滚动对象在可见窗口内将帮助你。 基本上，取消css中的固定位置，然后在用户滚动得足够远之后，使用滚动事件处理程序内部的jQuery将位置设置为固定。 此外，在此之前不要开始绘制动画。

我希望有所帮助！