title: jQuery toggle slider bar
body: <p>I am using bootstrap 4 as my framework and i want to create a fixed slide bar at the top right of my page on my background image for extra information. But the problem is whenever i click the jquery triggered button i fixed on-top, the contents are displayed on the bottom of the background image instead of sliding on the background image itself with z-index higher. This is what i am trying to achieve you can see it on this template,the red slider button on top:</p>
  
  <p><a href="http://demo.themetorium.net/html/asso/v.1.3/theme/index.html" rel="nofollow noreferrer">http://demo.themetorium.net/html/asso/v.1.3/theme/index.html</a></p>
  
  <p><a href="https://jsfiddle.net/s0qqrz7r/39/" rel="nofollow noreferrer">This is my jsFiddle so far</a></p>
  
  <pre><code>$(document).ready(function(){
      $("#slider-button p").click(function(){
  
          $(".top-slider").slideToggle();
          $(".hey").css('right', '0');
      });
  });
  </code></pre>