JSFiddle - React, Tailwind, and code Playground

by shanejones

HTML

<link rel="stylesheet" href="https:////maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt error quis sed minus cum reiciendis odio molestiae dicta dignissimos sequi. Sit reiciendis laborum deleniti vitae laboriosam doloribus enim dicta pariatur.</p>

<div class="social-area">
    
    
    <div class="buttons">

        <div class="hover-area">
        
            <div class="share-button facebook"><i class="fa fa-facebook"></i> Share</div>
            <div class="share-button twitter"><i class="fa fa-twitter"></i> Tweet</div>
            <div class="share-button google"><i class="fa fa-google-plus"></i> Share</div>
            <div class="share-button whatsapp"><i class="fa fa-whatsapp"></i> Message</div>
            
            <i class="fa fa-share-alt"></i>
        
        </div>   
        
    </div>
    
</div>


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt error quis sed minus cum reiciendis odio molestiae dicta dignissimos sequi. Sit reiciendis laborum deleniti vitae laboriosam doloribus enim dicta pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt error quis sed minus cum reiciendis odio molestiae dicta dignissimos sequi. Sit reiciendis laborum deleniti vitae laboriosam doloribus enim dicta pariatur.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt error quis sed minus cum reiciendis odio molestiae dicta dignissimos sequi. Sit reiciendis laborum deleniti vitae laboriosam doloribus enim dicta pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt error quis sed minus cum reiciendis odio molestiae dicta dignissimos sequi. Sit reiciendis laborum deleniti vitae laboriosam doloribus enim dicta pariatur.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt error quis sed minus cum reiciendis odio molestiae dicta dignissimos sequi. Sit...

SCSS

@mixin transition(){
 
    -webkit-transition: all .5s;
    transition: all .5s;
    
}



.social-area {
    
    text-align:right;
    margin: 10px 0
    
    .share-button {
          padding: 5px 12px 5px 5px;
          color: #FFF;
          cursor: pointer;
          margin-right: 10px;
          display: inline-block;
       
        i {
            width:15px;    
        }
            
    }
    
    .facebook {
        background-color: #3b5998       
    }
    
    .twitter {
        background-color: #55acee       
    }
    
    .google {
        background-color: #dd4b39       
    }
    
    .whatsapp {
        background-color: #31B945       
    }
        i.fa-share-alt {
            display: none;
        }
    
     
        
    &.scrolled {
             
    
            .buttons {
                position: fixed;
                display:none;
                top: 0px;
                right: 0;
                width: 60px;
                height: 60px;
                margin: 5px;
                background-color: white;
                padding: 3px;
                border-radius: 100%;
                
                -webkit-box-shadow: 0px 0px 79px -16px rgba(0,0,0,0.75);
                -moz-box-shadow: 0px 0px 79px -16px rgba(0,0,0,0.75);
                box-shadow: 0px 0px 79px -16px rgba(0,0,0,0.75);
                
                
                .hover-area:hover {
                    
                      
                        
                        
                        .share-button {
                            width: 30px;
                            height: 30px;
                            font-size: 23px;
                            z-index: 200;
                        }
                    
                        .facebook {
                              top: 0px;
                              left: -40px;
                        }
                        
                        .twitter {
                     ...

JavaScript

$(window).scroll(function(){
    if($(window).scrollTop() > $('.social-area').offset().top + $('.social-area').outerHeight()){
        $('.social-area').addClass('scrolled');
        $('.social-area .buttons').fadeIn()
    } else {
        $('.social-area').removeClass('scrolled')
    }
})