title: how to contain fixed bar in relative div and show scrollbar perfectly
body: <p>I want to contain fixed bar in relative div. But scrollbar is vanished on fixed bar area. 
  I want to know how to show perfect scrollbar without vanished area.</p>
  
  <p>code below.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
      &lt;div class="scrolling-contents"&gt;
          &lt;div class="fixed-wrapper"&gt;
            &lt;div class="fixed-bar"&gt;
              fixed bar
            &lt;/div&gt;
          &lt;/div&gt;
          aaaaaaa&lt;br/&gt;
          aaaaaaa&lt;br/&gt;
          aaaaaaa&lt;br/&gt;
          aaaaaaa&lt;br/&gt;
          aaaaaaa&lt;br/&gt;
          aaaaaaa&lt;br/&gt;
          aaaaaaa&lt;br/&gt;
          aaaaaaa&lt;br/&gt;
          aaaaaaa&lt;br/&gt;
          aaaaaaa&lt;br/&gt;
          aaaaaaa&lt;br/&gt;
          aaaaaaa&lt;br/&gt;
          aaaaaaa&lt;br/&gt;
          aaaaaaa&lt;br/&gt;
          aaaaaaa&lt;br/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>    .wrapper {
          top: 20px;
      }
      .scrolling-contents {
          position: relative;
          width: 100%;
          height: 250px;
  
          background-color: #CCC;
          overflow: auto;
      }
      .fixed-wrapper {
          position: absolute;
          width: 100%;
          top: 0;
          left: 0;
      }
      .fixed-bar {
          position: fixed;
          background-color: red;
          width: 100%;
          height: 20px;
      }
  </code></pre>
  
  <p>I want to get scrollbar width according to container div.</p>
  
  <p>Screenshot below:</p>
  
  <p><a href="https://i.stack.imgur.com/KA1MZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KA1MZ.png" alt="Screen shot"></a></p>
  
  <p>You can check vanished scrollbar because of fixed bar area.</p>