0

如果您在页面底部一直向下滚动

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

有一个带有很好滚动效果的圆形 div。有谁知道如何做到这一点？我的意思是，这是某种库还是自定义代码？

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

提前感谢您的帮助:)

4

3 回答 3

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 是否小于或大于并添加或删除课程，但我希望这会有所帮助。
于 2013-09-10T13:42:03.093 回答
0

我使用了这个 jQuery 插件：

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

一个类似于你的例子：

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

于 2013-09-10T13:29:10.213 回答
0

您可以使用jQuery滚动事件并检测scrolltop来触发div在滚动到某个点时隐藏或显示。

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

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

于 2013-09-10T13:31:40.520 回答