滚动时滑动元素

Question

我有这段代码，它使两个div在滚动时从左侧滑动进来，问题是两个div在滑动时重叠，另一个问题是这段代码启动了一个函数，而不是在滚动时靠近在一起。我宁愿它移动到中心相应的滚动位置。

我希望有人能帮我修改这段代码来做我上面提到的。

就在这里http://jsfiddle.net/qqSc3/1/

jQuery(document).ready(function(){
var slide = jQuery(".post-129");
var slide2 = jQuery(".post-169");
var opening = false;
var closing = false;
jQuery(window).scroll(function() {
var pos = jQuery(window).scrollTop();
console.log(pos);
if (pos > 100) {
    if (!opening) {
        opening = true; closing = false;
        slide.stop().animate({
            'opacity': 1,
            'margin-left': 0
        }, 1000, function() {
            opening = false;
        });
        slide2.stop().animate({
            'opacity': 1,
            'margin-left': 0
        }, 1000, function() {
            opening = false;
        });
    }

} else {
    if (!closing) {
        closing = true; opening = false;
        slide.stop().animate({
            'opacity': 0,
            'margin-left': -1000
        }, 500, function() {
            closing = false;
        });
         slide2.stop().animate({
            'opacity': 0,
            'margin-left': -1000
        }, 500, function() {
            closing = false;
        });
    }
}
});
});

提前感谢!

Answer 1

试试这个

在JS中查看

function scrollingSlider(selector, beginpos, endpos) {
    var slide,
        timeout = 0;
    slide = function () {
        var scrollpos;
        window.clearTimeout(timeout);
        timeout = 0;
        scrollpos = $(window).scrollTop();
        $(selector).each(function () {
            var $this = $(this),
                margintarget,
                margin = parseInt($this.css('margin-left'), 10),
                step;
            if (scrollpos <= beginpos) {
                margintarget = -1000;
            } else if (scrollpos >= endpos) {
                margintarget = 0;
            } else {
                margintarget = Math.round(-1000 * (endpos - scrollpos) / (endpos - beginpos));
            }
            if (margintarget === margin) {
                return; // nothing more to do
            }
            step = margintarget - margin;
            if (Math.abs(step) > 25) {
                step = 25 * (step < 0 ? -1 : 1);
            }
            $this.css('margin-left', margin + step);
            if (!timeout && (margin + step) !== margintarget) {
                timeout = window.setTimeout(slide, 10);
            }
        });
    };
    $(window).on('scroll', slide);
}
$(document).ready(function (){
    scrollingSlider('.post-129, .post-169', 100, 300);
});

指出

要使用scrollingSlider函数，传入一个jQuery选择器，滚动顶部位置(以像素为单位)开始滑动，滚动顶部位置(以像素为单位)滑动应该完成。如果您使用字符串选择器，您将避免在DOM元素上创建闭包的潜在问题，该问题可能会在大量使用场景中干扰释放内存。

另外，我建议不要使用滚动位置来确定何时显示元素，而是更改代码，根据每个元素当前顶部的位置与滚动窗口底部的视图距离进行比较，从而滑动内容。这完成了两件事:

1. 如果你改变你的页面添加或删除内容(从而改变你的元素的垂直定位)，你没有滚动工作错误。
2. 更重要的是，对于任何有大屏幕的人来说，大到足以包含整个页面，他们甚至不会看到你的滑动元素，因为他们没有滚动条!将内容的可见性与滚动条的位置联系起来(而不是项目进入视口的距离)是一种让内容完全无法访问的好方法——这可能不是你想要的。注意:我当前的屏幕是2880像素高，如果我旋转到纵向模式，它将是5120像素高。这是一个很多网页一次可见。适应这些大屏幕尺寸需要仔细考虑。你可以根据窗口的高度在页面底部添加一些填充或间距，迫使滚动条出现并可用(意思是滚动到底部导致最低可见项位于或超过顶部而不是底部)。

还有一个注意事项:我完全省略了opacity。问题是，因为在CSS中，你必须说-1000px，因为-1000没有单位，被忽略了。唯一可以不使用单位的情况是0——否则，浏览器怎么知道你指的是像素，而不是em s?

确实，我没有使用jQuery的动画功能。我也许可以。我可以简单地告诉jQuery将元素动画到正确的位置，而不是设置自己的超时来再次运行该函数，首先使用.stop()来停止任何未完成的动画。这是完全正确的。这次我只是这样做了。请随意修改

设置滑动的初始触发器为scroll事件。在slide函数中，对于我们感兴趣的每个元素，根据当前滚动位置计算我们想要滑动到的目标左边距。将元素向目标移动不超过25像素。如果没有达到目标位置，设置一个计时器来重复这个过程。由于滚动事件不仅可以从根本上改变目标位置，而且可以设置自己的级联动画，因此取消在slide函数开头设置的任何未完成的计时器。

速度考虑

如果你发现10ms太频繁，动画太笨重或太cpu密集，提高它，这样函数触发的频率就会降低，将最大步长增加一个类似的因子(目前是25)。如果动画太慢或太快，则相应地增加或降低最大步长。

进一步提高速度的想法:

在您的网站中，有其他代码同时运行，阻止幻灯片函数在10ms之前被调用。然后就会发生奇怪的事情。

1. 在滑动元素上使用id而不是类

2. 根据建议，将超时更改为40ms或100ms，并增加对象移动的最大象素数。

3. 在您的目标使用场景中，您的两个图像被锁定在一起，因此取出each函数并同时对两个图像执行操作-这应该可以显着减少执行时间。

最后，一个使用注意事项:不要多次包含脚本来动画多个对象。相反，只需在ready函数中多次调用scrollingSlider !

请参阅上面的"定位"部分，该部分已更新了有关屏幕尺寸的新的重要信息。