0

I'm looking for an Event which is triggered as soon as an Element (inline sharing buttons) scrolls out of page. I'd like to use this to trigger the drop in of social sharing buttons from the bottom of the page. You may have seen such side behaviour already on buzzfeed.com on mobile devices. If the sharing buttons come back in, the bottom sharing buttons should fade out again.

I'd prefer to only use CSS3 however I think some js (jQuery) may be necessary.

Anyone knows a library or some lines of code doing this?

Thx I really appreciate your expertise!

Manuel
  • 9,112
  • 13
  • 70
  • 110

2 Answers2

1

You could try like this

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 demo

Mindaugas Večkys
  • 423
  • 4
  • 10
0

Please refer to this question. Used the reference to code this

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(); 
 }
}

DEMO HERE

Community
  • 1
  • 1
karan3112
  • 1,867
  • 14
  • 20