JSFiddle - React, Tailwind, and code Playground

Part of answer for http://stackoverflow.com/questions/17980314/how-can-i-change-h1-color-as-you-scroll-down-the-page

by KURO KUMO

HTML

<div id="title">
    <p><span class="str_tit">STORY TITLE</span><span class="chp_tit"></span>
    </p>
</div>
<div class="wrapper">
    <div class="left">
        <div id="01" class="block red">
            <div class="cont-box">content 01</div>
            <div class="cont-box">content 02</div>
            <div class="cont-box">content 03</div>
            <div class="cont-box">content 04</div>
            <div class="cont-box">content 05</div>
        </div>
        <div id="02" class="block blue">
            <div class="cont-box">content 01</div>
            <div class="cont-box">content 02</div>
            <div class="cont-box">content 03</div>
            <div class="cont-box">content 04</div>
            <div class="cont-box">content 05</div>
        </div>
        <div id="03" class="block yellow">
            <div class="cont-box">content 01</div>
            <div class="cont-box">content 02</div>
            <div class="cont-box">content 03</div>
            <div class="cont-box">content 04</div>
            <div class="cont-box">content 05</div>
        </div>
    </div>
    <div class="right">
        <ul>
            <li><a class="active" href="#01">story</a>
            </li>
            <li><a href="#02">chapter 02</a>
            </li>
            <li><a href="#03">chapter 03</a>
            </li>
        </ul>
    </div>
</div>

CSS

body {
    background-color: black;
}
#title p {
    position:fixed;
    color: black;
    background:white;
    text-decoration:none;
    font-size: 2em;
    height:50px;
    width:100%;
    top:0;
    left:0;
}
#title span.bare_str {
    background: rgb(156, 156, 156);
}
#title span:hover {
    background: rgb(200, 200, 200)
}
.hide {
    display:none
}
 {
    margin-top:50px;
}
.left {
    width:70%;
    float:left;
}
.right {
    width:20%;
    right:0;
    padding:5%;
    background:#eee;
    height:100%;
    position:fixed;
}
.story-box {
    padding:20px;
}
.chapt-box {
    padding:20px;
    margin:20px;
}
.blue {
    background: blue;
}
.red {
    background: red;
}
.yellow {
    background: yellow;
}
.cont-box {
    font-size:100px;
    display:block;
    color: rgba(0, 0, 0, .2);
    background-color: rgba(0, 0, 0, .2);
    margin-bottom:20px;
}

JavaScript

//declare
var title = $('#title:first'),
    titleText = title.find('.str_tit'),
    titleTextHeight = titleText.height(),
    ob_story = $('.block'),
    ob_storyBottom = ob_story.offset().top + ob_story.outerHeight();

//on scroll animate
$(document).ready(function () {
    $(document).on("scroll", onScroll);
    
    //smoothscroll
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");
        
        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');
      
        var target = this.hash,
            menu = target;
        $target = $(target);
        
    });
});

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('.right ul li a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('.right ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

$(document).ready(function () {
    $(document).scroll(function () {
        if ($(document).scrollTop() + titleTextHeight > ob_storyBottom) {
            titleText.addClass('bare_str');
            $('#title .chp_tit').text(' | CHAPTER TITLE');
        } else {
            titleText.removeClass('bare_str');
            $('#title .chp_tit').text('');
        }
    });
});