<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 ----------> <!--Topic sticky start--> <div class="topic-sticky"> <div class="sidebar"> <h5 href="">Topic In Demand</h5> <div class="sidebar-body"> <a href="">Article</a> <a href="">Article</a> <a href="">Article</a> <a href="">Article</a> <a href="">Article</a> <a href="">Article</a> <a href="">Article</a> <a href="">Article</a> </div> </div> <button class="btn btn-primary topic-fixed" role="button"> Topic in demand </button> </div> <!--Topic sticky end-->

/*Topic sticky*/ .topic-sticky { position: fixed; top: 50%; z-index: 999; display: flex; justify-content: center; align-items: center; } .topic-sticky .btn-primary { background-color: #951b28; border-color: #951b28; border-radius: 0px; transform: translate(-38%, 0%) rotate(270deg); white-space: nowrap; } .topic-sticky .sidebar { width: 100%; background: #ffffff; border-right: 1px solid rgba(0, 0, 0, .2); transition: transform .3s ease-in-out; padding: 10px; height: 100%; box-shadow: 0px 0px 5px #c0b9b9; } .topic-sticky .sidebar h5 { font-size: 20px; font-weight: bold; color: #951b28; margin-bottom: 5; line-height: 1.5; } .topic-sticky .sidebar a { color: #000000; font-weight: 700; font-size: 16px; padding: 8px; } .topic-sticky .sidebar a:hover { color: #951b28; }

$(document).ready(function() { $(".topic-fixed").click(function() { $(".sidebar").toggle(1000); }); });