JSFiddle - React, Tailwind, and code Playground

by lukemartin

HTML

<div class="debug"></div>
<div class="wrap">
    <div class="sidebar">
        <h1>Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum nobis ex magnam itaque eius consectetur amet sed dolore vero placeat illo laborum cumque est unde ea nostrum repellendus alias similique.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum nobis ex magnam itaque eius consectetur amet sed dolore vero placeat illo laborum cumque est unde ea nostrum repellendus alias similique.</p>
        <h1>Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum nobis ex magnam itaque eius consectetur amet sed dolore vero placeat illo laborum cumque est unde ea nostrum repellendus alias similique.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum nobis ex magnam itaque eius consectetur amet sed dolore vero placeat illo laborum cumque est unde ea nostrum repellendus alias similique.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum nobis ex magnam itaque eius consectetur amet sed dolore vero placeat illo laborum cumque est unde ea nostrum repellendus alias similique.</p>
        <h1>Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum nobis ex magnam itaque eius consectetur amet sed dolore vero placeat illo laborum cumque est unde ea nostrum repellendus alias similique.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum nobis ex magnam itaque eius consectetur amet sed dolore vero placeat illo laborum cumque est unde ea nostrum repellendus alias similique.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum nobis ex magnam itaque eius consectetur amet sed dolore vero placeat illo laborum cumque est unde ea nostrum repellendus alias similique.</p>
        <h1>Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum nobis...

CSS

.debug {
    position: fixed;
    top: 0;
    left: 0;
    background-color: red;
    padding: 10px;
    z-index: 100;
}
.wrap {
    overflow: hidden;
    padding: 50px;
    position: relative;
}

.sidebar {
    float: left;
    width: 30%;
}
.sidebar.fixed {
    float: none;
    position: fixed;
    top: 50px;
    left: 50px;
}
.content {
    float: right;
    width: 65%;
}

JavaScript

(function() {
    var $sb = $('.sidebar'),
        $content = $('.content'),
        $debug = $('.debug');
    
    $sb.addClass('fixed');
    
    var startY = $sb.offset().top;
    var lastScrollTop = 0;
    var currentTop = 0;
    
    $(window).scroll(function(e) {
        var debug = '';
        debug += $('body').scrollTop();
        debug += ' ';
        //debug += $sb.outerHeight();
        debug += ' ';
        debug += -($(window).height() - $sb.outerHeight() - 50);
        
        var currentTop = parseInt($sb.css('top').replace('px', ''), 10);
        debug += '(((' + currentTop + ')))';
        var currentScrollTop = $('body').scrollTop();
        var dir;
        var diff = currentScrollTop - lastScrollTop;
        
        if(currentScrollTop > lastScrollTop) {
            dir = 'DOWN';
        } else {
            dir = 'UP';
        }
        
        if(dir === 'DOWN') {
            if($('body').scrollTop() < -($(window).height() - $sb.outerHeight() - 50)) {
                //$sb.css('top', -($('body').scrollTop() - 50));
                $sb.css('top', currentTop - diff);
            }
        } else {
            if((currentTop - diff) < 50) {
                $sb.css('top', currentTop - diff);
            }
            
            /*debug += '  -----   ' + $sb.css('top');
            if(parseInt($sb.css('top')) < 50) {
                //$sb.css('top', lastScrollTop - currentScrollTop);
            }*/
        }
        
        $debug.text(debug);
        

        lastScrollTop = currentScrollTop;        
    });
}());



/*
function ($) {
    var w = window,
        doc = document,
        starting_top = 0,
        current_top = 0,
        last_vertical_scroll = 0,
        lock = 0,
        scroller_back_to_top, hiding_top = 0,
        main_content_container = false,
        header_height = 0,
        defaults = {
            easing: "linear"
        },
        IntelligentSidebar = function (settings, obj) {
            this.settings =...