Question

如果您在页面底部完全向下滚动

http://www.wikihow.com/Organize-Business-Cards

有一个圆形div，出现一个很好的滚动效果。有谁知道怎么做？我的意思是，这是一个某种类型的库，还是自定义代码？

我在整个代码中都进行了搜索，但除了HTML和一些样式表之外，我找不到任何可以产生实际效果的代码。

提前感谢您的帮助：）

Answer 1

你想要做的是创建你想要制作动画的元素并在页面的右下角给它fixed position，然后你想让它negative right position大于它的宽度，所以它是隐藏的。然后使用JS，您需要检查窗口滚动位置与窗口高度的比较，当滚动更大时，将一个is-active类添加到将右侧位置从负位置转换为0的元素。

示例CSS

.circle {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background: silver;
    position: fixed;
    bottom: 0;
    right: -500px;
    -moz-transition: right .3s ease-in-out;
    -webkit-transition: right .3s ease-in-out;
    -o-transition: right .3s ease-in-out;
    transition: right .3s ease-in-out;
}

.circle.is-active {
    right: 0;
}

<强> JS

var circle = $('.circle'),
    windowHeight = $(window).height();

$(window).on('scroll', function() {   
    if( $('body').scrollTop() >= windowHeight ) {
        circle.addClass('is-active');
    } else {
        circle.removeClass('is-active');
    }
});

以下是演示http://jsfiddle.net/uYFaq/1/

这可以大大改进，因为一旦你开始滚动它只会为圆圈设置动画，并且有时滚动不可用，窗口滚动也会不断检查scrollTop是否小于或大于比添加或删除课程，但我希望这会有所帮助。

Answer 2

我使用了这个jQuery插件：

http://imakewebthings.com/jquery-waypoints/

与您类似的示例：

http://imakewebthings.com/jquery-waypoints/examples/scroll-analytics/

Answer 3

您可以使用jQuery滚动事件并检测scrolltop以触发div隐藏或显示滚动位于特定点时。

$(document).on('scroll', function() {
    var s = $(document).scrollTop();
    if(s > 300) {
       $('#popup').show();
    } else {
       $('#popup').hide();
    }
});

有关如何使用jQuery执行此操作的示例，请参阅this jsFiddle。然后，您可以将show()和hide()替换为您想要的任何动画。

滚动div效果 - 它是如何完成的？

3 个答案: