JSFiddle - React, Tailwind, and code Playground

by ozzon91

HTML

<script src="http://diokuz.github.io/baron/baron.full.js"></script>
<link rel="stylesheet" href="http://diokuz.github.io/baron.css">
<div class="clipper">
    <div class="scroller">
        <p>
Заведите html-страничку для регрессии вёрстки, пустите в неё одиннадцатиклассницу, и ваша вёрстка станет в 10 раз качественнее. Защищайте свой код js-тестами, и вы сможете отказаться от услуг тестировщиков (которым придётся переквалифицироваться в автоматизаторов и помогать вам писать тесты). На проекте 2ГИС Онлайн 90% задач попадают на бой без ручного тестирования, и это во многом стало возможным благодаря озвученным выше подходам тестирования.
        </p>
        <p>
Заведите html-страничку для регрессии вёрстки, пустите в неё одиннадцатиклассницу, и ваша вёрстка станет в 10 раз качественнее. Защищайте свой код js-тестами, и вы сможете отказаться от услуг тестировщиков (которым придётся переквалифицироваться в автоматизаторов и помогать вам писать тесты). На проекте 2ГИС Онлайн 90% задач попадают на бой без ручного тестирования, и это во многом стало возможным благодаря озвученным выше подходам тестирования.
        </p>
        <p>
Заведите html-страничку для регрессии вёрстки, пустите в неё одиннадцатиклассницу, и ваша вёрстка станет в 10 раз качественнее. Защищайте свой код js-тестами, и вы сможете отказаться от услуг тестировщиков (которым придётся переквалифицироваться в автоматизаторов и помогать вам писать тесты). На проекте 2ГИС Онлайн 90% задач попадают на бой без ручного тестирования, и это во многом стало возможным благодаря озвученным выше подходам тестирования.
        </p>
        <p>
Заведите html-страничку для регрессии вёрстки, пустите в неё одиннадцатиклассницу, и ваша вёрстка станет в 10 раз качественнее. Защищайте свой код js-тестами, и вы сможете отказаться от услуг тестировщиков (которым придётся переквалифицироваться в автоматизаторов и помогать вам писать тесты). На проекте 2ГИС Онлайн 90% задач попадают на бой без ручного тестирования, и это во...

CSS

body {
    background: #c1c1c1;
}

.clipper {
    background: #fff;
    position: absolute;
    left: 200px; top: 30px; right: 0;
    height: 300px;
    /* overflow: hidden; */
}

.scroller {
    background: yellow;
    height: 300px;
    overflow-y: scroll;
}

.scroller::-webkit-scrollbar {
    width: 0;
}

.header {
    position: relative;
    background: violet;    
}

.scroller__track {
    display: none; /* Invisible by default */
    position: absolute;
    right: 4px;
    top: 10px;
    bottom: 4px;
    width: 10px;
    background: rgba(0, 0, 0, .1);
}
.baron .scroller__track {
    display: block; /* Visible when scrolling is possible */
}
.scroller__bar { /* The bar. You should define width, right position and background */
    position: absolute;    
    z-index: 1;
    right: 0;
    width: 10px;
    background: #999;
}

.fix_head {
    position: fixed;
    bottom: 0; left: 0; right: 0;
}


.header__title_state_fixed {
    position: absolute;
    z-index: 1;
    background-color: rgba(220, 209, 250, .95);
    text-shadow: 0 0 5px #fff;
}
.header__title_position_top {
    background-color: rgba(200, 250, 200, .8);
}

.header__title_position_bottom {
    background-color: rgba(250, 200, 200, .8);
}

JavaScript

$(function() {

    $('.scroller').baron({
        bar: '.scroller__bar',
        barOnCls: 'baron'
    }
    ).fix({
        elements: '.header',
        outside: 'header__title_state_fixed',
        before: 'header__title_position_top',
        after: 'header__title_position_bottom'
    });
    
});






/*$(function() {
    var $header = $('.header');
    var $clipper = $('.clipper'); 
    var $scroller = $('.scroller');
    var delta = $scroller.get(0).offsetWidth - $scroller.get(0).clientWidth;
    
    if(delta) {
        $scroller.css('margin-right', -delta+'px');
    }
    
    // function isCan(fixClass) {}
    
    $scroller.on('scroll', function() {
        var offsetBottmClipper = $(window).height() - ($clipper.offset().top+$clipper.height());        
        var offsetBottmHeader = $(window).height() - ($header.offset().top+$header.height());
        
        console.log('offsetBottmClipper', offsetBottmClipper);
        console.log('offsetBottmHeader', offsetBottmHeader);
        
        if(offsetBottmClipper) {
            if(offsetBottmHeader <= offsetBottmClipper) {
                $header.addClass('fix_head');            
            } else {
                $header.removeClass('fix_head');
            }
        }
    });
    
    $scroller.scroll();
});*/