JSFiddle - React, Tailwind, and code Playground

by Rajesh Dixit

HTML

<body id="page-top" class="index">
    <!-- Navigation -->
    <nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand" href="#page-top">Story Box</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <!-- <li class="page-scroll">
                        <a href="#portfolio">Portfolio</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#about">About</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#contact">Contact</a>
                    </li> -->
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

    <!-- Header -->

    <div class="container" tabindex="0" id="body-container">
        <div class="row col-lg-offset-5">
            <div class="form-group col-lg-12">
                <button class="btn btn-success btn-lg" href="#createModal" class="portfolio-link" data-toggle="modal">
                    <span class="glyphicon glyphicon-plus"></span>
                              Create
                </button>
            </div>
        </div>

        <table...

CSS

#body-container{
  margin-bottom: 120px;
  padding-top: 150px;
  max-height: 600px;
}

#story-table{
  position: absolute;
}

JavaScript

$(".navbar-toggle").on("click", function(){
	var top = getTopValue($("#story-table"));
	$("#story-table").animate({
  	top: top
  }, 400).toggleClass("visible")
})

function getTopValue(el){
	return (!el || el.hasClass("visible") ? "-100" : "100") + "px"
}

$("#story-table").css({top: getTopValue() });