如何在航点function内滚动动画？

当用户向下滚动时，我有从屏幕左侧和右侧出现的图像。

使用divPosition = $('div').offset().top; 获取包含元素的位置我从scrollValue = $(document).scrollTop();减去该值scrollValue = $(document).scrollTop(); 并将值应用于绝对定位图像上的左侧位置。

包含div的偏移量是在刷新和resize时计算的。 在不调整窗口大小的情况下， x=scrollValue - divPosition随刷新页面的滚动距离而变化。 我希望它保持一致。 有没有更好的方法来使这种类型的动画工作。

例如，是否可以使用垂直滚动作为带有航点的x值来触发动画？

  window.onresize=function(){ divPosition = $('div').offset().top; }; $(document).scroll(function(){ scrollValue = $(document).scrollTop(); x = scrollValue - divPosition; } 

这是该网站的链接。 当我发现问题的原因时，我会在这个问题中发布相关的代码部分。

http://www.otherdewi.com/gg.html

Answer 1

你可以发布jsfiddle或链接到现在正在工作的网站..

我有一个问题……

为什么不使用你可以附加的css类和deAttach，使用position:fixed和top:0来保持div与窗口顶部相连。 它会更光滑，更轻松。

是的，你可以这样点：

这样做的一个例子是：

http://jsfiddle.net/techsin/f7bhy/8/

 var doc = $(document), wpoints = [5, 10, 15, 20, 25], //5 points for 5 slides...1st slide appear at start mh= wpoints[wpoints.length - 1], //and switch to 2nd at '5', and scrolling stop at 25 h = wpoints[0], l = 0, i = 0, pos = 0; doc.on('mousewheel', function (e) { if (e.originalEvent.wheelDelta > 0) { if (pos > 0) pos--; } else if (pos= h){ set(1); } else if (pos <= l) set(-1); }); function set(x) { if (x == 1 && (wpoints[i + 1] != undefined)) { l = h h = wpoints[++i]; doWork(); } if (x == -1 && (wpoints[i - 1] != undefined)) { h = l l = wpoints[--i - 1]; doWork(); } } doWork(); function doWork() {$('.slide').hide().eq(i).slideDown();} 

Answer 2

终于解决了问题。

1. 清理我的代码添加clearfix以确保每个部分的高度正确报告。

2. 在Waypoint内滚动动画的function

    $('#about').waypoint(function(direction){ $(document).scroll(function(){...}); }); 

3. 我添加了一个window.onresize函数来重新计算相关容器上的位置以解释内容的重排。

    window.onresize = function(){ tourPosition=$tours.offset().top; winH = window.innerHeight; }; 

4. 获取值以在滚动时从左侧和右侧为元素设置动画。 我计算了文档的滚动位置+窗口高度 – 包含元素的位置。

    scrollPos = $(this).scrollTop(); var posX = scrollPos - tourPosition + winH; 

5. 然后在posX处添加偏移量。

    $('pic1').css({'left':posX-600}); 

   $（ ‘PIC2’）的CSS（{ ‘右’：POSX-800}）; $（ ‘PIC3’）的CSS（{ ‘左’：POSX-1200}）;