Question

当用户向下滚动时，我会在屏幕的左侧和右侧显示图像。

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

包含div的偏移量是在刷新和调整大小时计算的。在不调整窗口大小的情况下，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<mh) pos++;

    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

终于解决了问题。

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

在Waypoint

内滚动动画的功能

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

我添加了一个window.onresize函数来重新计算相关容器上的位置，以说明内容的重排。
```
window.onresize = function(){
    tourPosition=$tours.offset().top;
    winH = window.innerHeight;
};
```
获取一个值，以便在滚动时从左侧和右侧为元素设置动画。我算了文档的滚动位置+窗口高度 - 包含元素的位置。
```
scrollPos = $(this).scrollTop();
var posX = scrollPos - tourPosition + winH;
```
然后添加了偏移量。
```
$('pic1').css({'left':posX-600});
```
。
$（ 'PIC2'）的CSS（{ '右'：POSX-800}）; $（ 'PIC3'）的CSS（{ '左'：POSX-1200}）;

如何在航点功能内滚动动画？

2 个答案: