在滚动事件上使用 jQuery 滑动 div答案

【问题标题】：Sliding a div in with jQuery on scroll event在滚动事件上使用 jQuery 滑动 div
【发布时间】：2014-02-08 08:53:22
【问题描述】：

我正在使用 jQuery 淡入页面底部的“幻灯片”，它是一个应该贴在右侧的小标签。我目前正在延迟淡入它，但我想在用户向下滚动时淡入它。

不过，这会在页面上不断滑动 div，而不是让它粘在一边。

   $(function() {
        var slide = $("div[data-slide='true']");

        $(window).scroll(function() {
            var pos = $(document).scrollTop();
            console.log(pos);
            if ($(document).scrollTop() > 400) {
                 slide.animate({opacity: 1,right:'+=350'},1350, 'swing').stop();

           } else {
                 slide.clearQueue().animate({opacity: 0,right:'-=350'},500, 'easeOutBounce');
           }
        });

    });

到达初始航路点后如何停止滑行？我似乎可以用$(window).unbind('scroll'); 解除滚动事件的绑定，但幻灯片永远不会动画。

【问题讨论】：

标签： jquery

【解决方案1】：

每次触发滚动事件时，您都会开始一个新的动画到 +350 像素，这就是它在页面上移动的原因。
我做了一个小测试来防止这种情况。我基本上添加了两个var（打开和关闭）以防止动画多次启动，并稍微更改了动画本身：

演示：
http://jsfiddle.net/B7pJL/1/

JS：

var slide = $("div[data-slide='true']");
var opening = false;
var closing = false;
$(window).scroll(function() {
    var pos = $(window).scrollTop();
    console.log(pos);
    if (pos > 100) {
        if (!opening) {
            opening = true; closing = false;
            slide.stop().animate({
                opacity: 1,
                'margin-left': -350
            }, 1350, function() {
                opening = false;
            });
        }

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

【讨论】：