Question

Hello Stackoverflow系列，

我正在尝试创建像upworthy.com

这样的共享按钮

当你开始滚动时看到Facebook和Twitter按钮动画（如果你有一个小屏幕，它立即动画）

我刚为它创建了jsfiddle http://jsfiddle.net/4rnzoz6c/2/

<div>
    <div class="twitter">Share on twitter</div>
    <div class="facebook">Share on facebook</div>
    <br style="clear:both" />
</div>


.twitter, .facebook {
    width:180px;
    float:left;
    margin-right:20px;
    color:#fff;
    font-size:20px;
    padding:10px 15px;
    text-align:center
}
.twitter {
    background-color:#00c6fc
}
.facebook {
    background-color:#3b55a0
}

我不知道从哪里开始编写jQuery

是否有jquery插件？

Answer 1

您可以使用以下任何类型的动画：

window.onscroll=function(){
    var y=window.scrollY || document.documentElement.scrollTop;
    $(".twitter,.facebook").animate({'margin-left':'+20','margin-top':y});
}

一个例子...... DEMO

Answer 2

我在UIkit框架中看到了这一点并使用了Scrollspy。试一试。 http://getuikit.com/docs/scrollspy.html他们的样本低于主题。

尝试上课并检查代码是如何完成的。希望这有帮助。

在jQuery中分享按钮动画

2 个答案: