如果没有在屏幕上显示内联按钮，则jQuery会在底部放下“社交共享”按钮

Question

我正在寻找一个事件，该事件在元素（行内共享按钮）滚动出页面时立即触发。 我想用它来触发页面底部的社交共享按钮的插入。 您可能已经在移动设备上的buzzfeed.com上看到了这种副作用。 如果共享按钮重新出现，则底部共享按钮应再次淡出。

我宁愿只使用CSS3，但我认为可能需要一些js（jQuery）。

有人知道这样做的库或一些代码行吗？

非常感谢您的专业知识！

Answer 1

你可以这样尝试

JS：

$( window ).scroll(function()  {
    if($( window ).scrollTop() >= socialButton.offset().top + socialButton.outerHeight())
        hiddenSocialButton.stop().animate({'bottom': 0}, 100);
    else
         hiddenSocialButton.stop().animate({'bottom': -hiddenSocialButton.outerHeight()}, 100);
})

jsfiddle演示

Answer 2

请参考这个问题 。 使用参考来对此进行编码

HTML：

<div class="container">
 <div class="social_links">Social Links</div>
 <div class="bottom_links">Bottom Links</div>
</div>

JS：

function triggerFunction()
{
 if(isScrolledIntoView('.social_links'))
 {
    $('.bottom_links').fadeOut(); 
 }else{
    $('.bottom_links').show(); 
 }
}

此处演示