JSFiddle - React, Tailwind, and code Playground

by Jason Davis

HTML

<div id="container">
        <div id="header">
            Floating Social Buttons
        </div>
        <div id="content">
            <div id="social-container">
                <div id="social">
                    <div class="icon">
                        <img src="http://www.dittocode.com/sandbox/facebookicon.png" alt="Facebook" />
                    </div>
                    <div class="icon">
                        <img src="http://www.dittocode.com/sandbox/twittericon.png" alt="Twitter" />
                    </div>
                </div>
            </div>
            <p><strong>Try scrolling past the social buttons on the left.</strong></p>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ullamcorper aliquet eros sit amet accumsan. Nunc nec vestibulum dolor. Nulla interdum laoreet sapien, nec elementum sapien convallis ac. Praesent elementum aliquet dui, ac facilisis nibh vehicula in. Vivamus at lacus augue. Vivamus interdum eleifend turpis, a tempor massa rutrum sit amet. Ut tristique fermentum sapien, id euismod sapien mattis quis. Ut non cursus libero. Donec interdum, felis quis porta aliquam, lorem ipsum elementum arcu, a posuere sapien eros ut nisi. Suspendisse est nulla, blandit sed luctus at, ullamcorper et lacus. Donec vitae cursus arcu. Ut nec mauris a nisi tincidunt semper et vel purus. Nunc mi turpis, elementum quis lacinia ut, euismod vel dolor. Integer hendrerit, urna nec venenatis congue, lacus velit bibendum purus, vel hendrerit magna nisl vitae eros. Nunc a elit eget nulla pulvinar eleifend. Phasellus placerat, urna ut porttitor accumsan, arcu mauris tempor enim, non dictum massa turpis at nisl. Donec vel ullamcorper tellus.
            </p>
            <p>
            Sed tristique porttitor magna nec mollis. Ut lobortis consectetur tortor eget varius. Mauris dolor nisl, rhoncus non pharetra non, cursus id ligula. Donec egestas vulputate auctor. Donec hendrerit nulla eget dolor aliquam...

CSS

body {
    margin: 0;
    text-align: justify;
}

#container {
    width: 800px;
    margin: 0 auto;
}

#header {
    font-size: 2.5em;
    padding: 16px 0;
}

.button {
    float: left;
    padding: 4px 16px;
    margin-right: 8px;
    border: 1px solid #999;
    background: #ddd;
    cursor: default;
}

#content {
    position: relative;
}

#social {
    position: absolute;
    margin-left: -70px;
    margin-top: 16px;
}

#social.floating {
    position: fixed;
    top: 0;
}

JavaScript

//Floating DIV on page scroll saved from 
// http://www.dittocode.com/
// http://www.dittocode.com/sandbox/floating-menu-bar2.html

$(document).ready( function() {

    $(window).scroll( function() {
        if ($(window).scrollTop() > $('#social-container').offset().top)
            $('#social').addClass('floating');
        else
            $('#social').removeClass('floating');
    } );

} );