0

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

用于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

4

2 回答 2

1

你能发布 jsfiddle 或链接到现在工作的网站吗？

我有一个问题...

为什么不直接使用可以附加和解除附加的 css 类，通过使用position:fixed和保持 div 与窗口顶部相连top:0。它会更光滑，重量更轻。

是的，您可以像这样提出路点：

这样做的一个例子是：

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();}
于 2013-10-01T04:40:08.380 回答
0

终于解决了问题。

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

  2. 包裹在 Waypoint 内滚动动画的功能

    $('#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({'right':posX-800}); $('pic3').css({'left':posX-1200});

于 2013-10-02T02:35:40.017 回答