JSFiddle - React, Tailwind, and code Playground

by ddolan

HTML

<div class="body">
    <div id="leftRail" class="col-md-3"></div>
    <div id="content" class="content-col">
        <div class="page-title">
             <h2>Test Preparation</h2>

        </div>
        <div class="content-wrap" style="height: 585.625px; overflow-y: scroll;">
             <h2>Maximize Your Potential with MMM's Test Preparation Programs</h2>

            <div class="titling">
                 <h4>A Few Additional Exam Points Can Make a Big Difference</h4>

            </div>
            <div class="quote">
                <p>"Really talented people with a lot of expertise."</p>
                <p class="credit">— Virat G., current Columbia Law School fella</p>
            </div>
            <div class="story">
                 <h3>Why MMM's Test Preparation Programs Are the Best in the Business</h3>

                <p>We all learn differently, yet mass-market test preparation is one-size-fits-all. That's why MMM offers highly personalized and customized one-on-one tutoring programs tailored to meet your needs.</p>
                 <h3>The MMM Approach to Test Preparation: Proven Record of Success</h3>

                <p>Highly personalized, one-on-one tutoring sessions are MMM's hallmark. This approach allows us to focus on individual strengths and weaknesses and tailor our curriculum to the needs of each fella. Unlike mass-market test preparation companies that develop general programs aimed at the so-called "average fella," and unlike our small boutique firm competitors that offer smart "study-buddies" but no real curriculum, MMM offers proven curricula for each of its service offerings and customizes all tutoring sessions to meet your individual needs. Our goal is to maximize each fella's potential.</p>
                <p>As a selective boutique firm, we work with only a small number of fellas. As one of our fellas, you become part of the MMM family and benefit from the support of our entire staff. Our fellas benefit from MMM's team-based...

JavaScript

$(function(){
    //find the elements to work with
    var _wrap = $('#content>.content-wrap');
    var story = _wrap.find('.story');
    var titles = story.find('h3');
    var left = $('#leftRail');
    //nav object will be constructed and appended to #leftRail
    var nav = $('<ul class="leftnav nav nav-pills nav-stacked" />');
	
    //Find each h3, prepend an <a name/> and add the link to the rail menu
    $.each(titles, function(){
        var _this = $(this);
        var title = _this.text();
        var text = title.replace(/[\.,-\/#!$%\^&\*;:{}=\-_`~()'"]/g,"");
        var tmp = text.replace(/\s/g,'');
        var id = (tmp.substring(0,20)).toLowerCase();
        _this.prepend($('<a />').attr({'name':id, 'id':id}));
        var output = $('<li />').append(
            $('<a />').attr('href','#'+id).text(title).on('click', function(e){
            e.preventDefault();
            var _this = $(this);
            //on click, scrollTop to each h3
            var top = $('#'+id).offset().top - _wrap.offset().top;
            _wrap.animate({scrollTop: top }, 300, function(){
                console.log(_wrap.scrollTop());
            });
        })
        );
        nav.append(output);
    });
    left.append(nav);
});