<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="post">
<!--<header>-->
<!-- <h1 class="display-1 text-center">This is the title</h1>-->
<!--</header>-->
<div class="container-fluid bg-dark text-light">
<div class="row pt-5">
<div class="col-sm-3">
<aside class="position-sticky bg-info jumbotron">
<ul>
<li>
<a href="#" class="text-light">HOME</a>
</li>
<li>
<a href="#" class="text-light">PRODUCT</a>
</li>
<li>
<a href="#" class="text-light">ABOUT</a>
</li>
<li>
<a href="#" class="text-light">CONTACT</a>
</li>
</ul>
</aside>
</div>
<div class="col-sm-9">
<div class="card bg-dark" style="width: 40vw;">
<img class="card-img-top" src="https://i.imgur.com/VSv6Bf1.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum diam ut tortor lobortis, eu finibus tellus euismod. Suspendisse pellentesque mi enim, sit amet posuere velit consequat in. In elementum tortor vitae ex venenatis sollicitudin ut eu augue. Sed pretium vel nunc eu imperdiet. Duis imperdiet quam purus. Integer ac lectus nec lectus iaculis fringilla eget non nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam sit amet ante nec felis malesuada tempor sed id nibh. Vivamus facilisis eros at ultrices accumsan. In dui dui, laoreet in pellentesque quis, iaculis lobortis eros. Vestibulum dignissim ac ante ac placerat. Phasellus ullamcorper rutrum laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean arcu nulla, sollicitudin a auctor sit amet, interdum ac enim. Fusce ac porta tellus. Suspendisse orci neque, porta et dictum quis, pharetra vitae mauris.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-9">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis, nisl quis bibendum fringilla, dui orci faucibus tortor, fringilla rhoncus lacus dolor quis quam. Nulla eget ipsum blandit, venenatis felis et, rhoncus risus. Quisque sodales, eros non feugiat rhoncus, mauris quam luctus ipsum, et rutrum ante dui at massa. Aliquam id pulvinar nibh. Vivamus lorem mi, mattis id orci auctor, posuere tincidunt nunc. Sed at arcu ut augue tempus dapibus nec at felis. Nunc ornare lacus id justo aliquet volutpat. Etiam vehicula tempor risus in dignissim. Fusce tristique porttitor sapien, in vulputate metus volutpat a. Suspendisse rutrum neque eu justo pulvinar sollicitudin. Pellentesque quis laoreet lacus, et tincidunt erat. Quisque tellus orci, consectetur nec tempor eu, facilisis sagittis dui. Vestibulum id lorem finibus, facilisis leo eu, semper ex. Morbi sed finibus massa. Duis sit amet tempor ante, et porttitor velit. Pellentesque non condimentum odio. Pellentesque mollis, est non scelerisque cursus, mi tortor vulputate elit, a dapibus risus est sit amet mi. Vivamus lacinia neque ipsum, sit amet dapibus lacus malesuada gravida. Pellentesque ante erat, consectetur in diam et, tincidunt rutrum nisi. In at sollicitudin est. Etiam at magna lectus. Integer id lectus a dui pharetra ultricies vitae ac metus. Nullam vulputate nec enim id volutpat. Sed elementum sapien nunc, non vestibulum nunc dignissim ac. In vulputate rutrum lectus a euismod. Integer gravida sollicitudin diam. Ut bibendum, tellus eget ultrices euismod, metus tellus dapibus purus, id interdum sapien nisi eget neque. Nullam sed arcu euismod, interdum elit sit amet, facilisis tellus. Integer porta ullamcorper leo, id condimentum nulla cursus non. Proin iaculis maximus fringilla. Nulla efficitur turpis quis luctus tincidunt. Aliquam pellentesque risus sit amet luctus venenatis. Donec neque nisl, porttitor nec elementum non, tincidunt ut est. Cras quis quam ullamcorper, molestie nisi vitae, interdum urna. Vivamus commodo elit sit amet nunc pellentesque rutrum. Nullam in dolor velit. Aenean nec tortor consectetur, dignissim ligula eget, lacinia metus. Ut maximus urna sed purus blandit venenatis. Nunc vitae dui ut ex semper iaculis. Cras a est in diam egestas tempor id vel velit. Curabitur non sagittis lectus. Integer eget magna eros. Donec scelerisque erat non libero bibendum mattis. Sed tempus nec magna at maximus. Sed eu tellus lorem.
</div>
</div>
</div>
</div>
.position-sticky {
top: 1rem;
}
.card-title {
font-size: 2.4rem;
}
.card-body {
font-size: 2rem;
}
.col-sm-3 {
height: 400px;
background: #990;
}
setTimeout({
console.log('hello world');
$('#box-0').addClass();
}, 3000);
