JSFiddle - React, Tailwind, and code Playground

by Steve C

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="row">
    <div id="doc_content_main" class="col-md-3">
        <div id="content_1">
             <h3>Heading 1</h3>
Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.</div>
        <div id="content_2">
             <h3>Heading 2</h3>
Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some content here.
            <br/>Some...

CSS

#doc_nav.affix {
    position: fixed;
    top: 0px;
}
/* sidebar */
 .bs-docs-sidebar {
    /*    padding-left: 20px;*/
    /*    margin-top: 20px;
    margin-bottom: 20px;  */
}
/* all links */
 .bs-docs-sidebar .nav>li>a {
    color: #999;
    padding: 4px 20px;
    font-size: 13px;
    font-weight: 400;
}
/* nested links */
 .bs-docs-sidebar .nav .nav>li>a {
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 30px;
    font-size: 12px;
}
/* all links */
 .bs-docs-sidebar .nav>li>a {
    /*add trasnparent border */
    border-left: 2px solid transparent;
}
/* active & hover links */
 .bs-docs-sidebar .nav>.active>a, .bs-docs-sidebar .nav>li>a:hover, .bs-docs-sidebar .nav>li>a:focus {
    color: #563d7c;
    text-decoration: none;
    background-color: transparent;
    border-left: 2px solid #563d7c;
}
/* all active links */
 .bs-docs-sidebar .nav>.active>a, .bs-docs-sidebar .nav>.active:hover>a, .bs-docs-sidebar .nav>.active:focus>a {
    font-weight: 700;
}
/* nested active links */
 .bs-docs-sidebar .nav .nav>.active>a, .bs-docs-sidebar .nav .nav>.active:hover>a, .bs-docs-sidebar .nav .nav>.active:focus>a {
    font-weight: 500;
}
/* hide all (inactive) nested list */
 .bs-docs-sidebar .nav ul.nav {
    display: none;
}
/* show active nested list */
 .bs-docs-sidebar .nav>.active>ul.nav {
    display: block;
}

JavaScript

$('body').scrollspy({
            target: '.bs-docs-sidebar',
            offset: 150
        });

        $('#doc_nav').affix({
            offset: {
                top: $('#doc_nav').offset().top
            }
        });

        $('#doc_nav').on( "click", "a", function( e ){
//            e.preventDefault();
            var target = this.hash;
            var $target = $(target);
            var offset = $target.offset().top;
            console.log(offset);
            offset = offset - 100;
            console.log(offset);

            $('html, body').scrollTop( offset );
 
           
        });