JSFiddle - React, Tailwind, and code Playground

by mynameisdonald

HTML

<div id="header">header</div>

<aside class="sidebar" role="complementary">
    <ul class="sticky" style="position: absolute; top: 60px;">
<li><img src="/build/wp-content/themes/andersons/img/sidebar/sofa.png"><br><strong>Sofa so good.</strong><br>We have a wide variety of sofas to choose from in store, froom traditional styles through to modern contemporary pieces.</li><li><img src="/build/wp-content/themes/andersons/img/sidebar/delivery.png"><br><strong>Did you know.</strong><br>We deliver for FREE throughout the Grampian region. Just ask a member of staff for details</li><li><img src="/build/wp-content/themes/andersons/img/sidebar/curtain.png"><br><strong>Curtain making.</strong><br>Curtains are a speciality at Andersons, and we’re proud to offer a full bespoke service, covering design, making and fitting.</li><li><img src="/build/wp-content/themes/andersons/img/sidebar/finishing.png"><br><strong>Finishing touches</strong><br>Complete the look from our selection of lamps, mirrors, pictures, rugs, vases, bowls and lots more.</li>    </ul>

</aside>

<div id="main">
    Main
</div>

<div id="footer">
    footer
</div>

CSS

body {
    margin: 10px auto;
    font-family: sans-serif;
    width: 500px;
}

div {
    border-radius: 5px;
    box-shadow: 1px 2px 5px rgba(0,0,0,0.3);
    border: 1px solid #ccc;
    padding: 5px;
}

.sidebar {
    width: 210px;
    float: right;
    position: relative;
    box-shadow: none;
    border: none;
    margin: 0;
    padding: 0;
}

#main {
    width: 270px;
    height: 4000px;
}

#footer {
    clear: both;
    margin: 10px 0;
}

.sticky {
    width: 200px;
    max-height: 500px;
    position: absolute;
}

#header {
    height: 200px;
    margin-bottom: 10px;
}

.sticky.fixed {
    position: fixed;
    top: 10px;
}


#footer { height: 1000px; }

JavaScript

$(function() {
    var top = $('.sticky').offset().top - parseFloat($('.sticky').css('marginTop').replace(/auto/, 0));
    var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));

    var maxY = footTop - $('#sidebar').outerHeight();

    $(window).scroll(function(evt) {
        var y = $(this).scrollTop();
        if (y > top) {
            if (y < maxY) {
                $('.sticky').addClass('fixed').removeAttr('style');
            } else {
                $('.sticky').removeClass('fixed').css({
                    position: 'absolute',
                    top: (maxY - top) + 'px'
                });
            }
        } else {
            $('.sticky').removeClass('fixed');
        }
    });
});