Question

我有这段代码，它允许两个div在滚动时从左侧滑入，问题是2 DIV在滑入时重叠，另一个问题是此代码启动一个函数，而不是移动当你滚动时，更紧密地在一起。我宁愿它相应地移动到中心滚动位置。

我很乐意，如果有人可以帮我修改这段代码来做我上面提到的。

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

试试这个。

See it in a JS Fiddle

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选择器，以像素为单位开始滑入的scrolltop位置，以及幻灯片应该完成的以像素为单位的scrolltop位置。如果使用字符串选择器，则可以避免在DOM元素上创建闭包的潜在问题，这可能会影响在繁重使用场景中释放内存。

<强>定位

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

如果您更改页面以添加或删除内容（从而更改元素的垂直位置），则不会导致滚动错误。

更重要的是，对于任何大屏幕足以容纳整个页面的人来说，他们甚至都看不到你的幻灯片元素，因为它们没有滚动条！将事物的可见性与滚动条的位置联系起来（而不是项目必须进入视口的距离）是使您的内容完全无法访问的好方法 - 可能不是您正在寻找的内容。注意：我当前的屏幕高2880像素，如果我将它旋转到纵向模式，它将是5120像素高。那个网页的很多一次可见。适应这些大屏幕尺寸需要仔细考虑。您可以在页面底部添加某种填充或间距，这取决于窗口高度，强制滚动条显示并可用（意味着滚动到底部会导致最低的可见项目位于或超出页面的 top 而不是 bottom ）。

还有一点需要注意：我完全放弃了opacity。问题是因为在CSS中你必须说-1000px因为-1000没有单位而被忽略。唯一不使用任何单元的时间是0 - 否则，浏览器如何知道您的意思是像素，而不是em s ?.

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

<强>解释

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

速度注意事项

如果您发现10ms过于频繁且动画质量较大或CPU密集度过高，请将其提高以使功能不那么频繁地触发，将最大步长增加一个相似的因子（目前为25）。如果动画太慢或太快，请相应地增大或减小最大步数。

进一步改善速度的想法：

在您的网站中，还有其他代码同时运行，阻止在10ms启动之前调用滑动功能。然后会发生奇怪的事情。

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

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

在您的目标使用场景中，您的两个图像被锁定在一起，因此请取出each函数并同时对两者执行操作 - 这样可以显着缩短执行时间

最后，使用说明：不要多次包含脚本来为多个对象设置动画。相反，只需在scrollingSlider函数中多次调用ready！

<强>更新

请参阅＆＃34;定位＆＃34;上面的部分，已经更新了有关屏幕尺寸的新的重要信息。

滚动元素作为滚动

1 个答案: