title: scroll inside fixed scollable tab
body: <p>in my HTML code  i have a tab i want this tab always visible when scrolling that's for i added a java script function to do it .
  this is my js function :</p>
  
  <pre><code>if ($(window).width() &lt; 991) {
  function sticky_relocate() {
  var window_top = $(window).scrollTop();
  var div_top = $('#sticky-anchor').offset().top;
  if (window_top &gt; div_top) {
      $('#alwaysvisible').addClass('stick');
      $('#sticky-anchor').height($('#alwaysvisible').outerHeight());
              } else {
                  $('#alwaysvisible').removeClass('stick');
                  $('#sticky-anchor').height(0);
              }
          }
  
  
          $(function () {
              $(window).scroll(sticky_relocate);
              sticky_relocate();
          });
      }
  </code></pre>
  
  <p>html </p>
  
  <pre><code>     &lt;div class="col-lg-3 col-md-1 col-xs-1"&gt;
                                  &lt;div class="sides_margin sides_margin2"&gt;
                                      &lt;div id="sticky-anchor"&gt;&lt;/div&gt;
                                      &lt;div id="alwaysvisible" class="rblk col-lg-12 col-md-12 col-xs-12 col-sm-12 categoriesWrapper"&gt;
                                          &lt;div class="btitle "&gt;
                                              &lt;div class="bg"&gt;&lt;/div&gt;
                                              &lt;div class="px"&gt;&lt;/div&gt;
                                              &lt;div class="padd categories"&gt;&lt;h4 class="visible-lg categoriesh4"&gt;{{'categories'|trans }}&lt;/h4&gt;&lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div id="scrollablediv" class="categoryListWrapper"&gt;
                                              &lt;ul&gt;
                                                  {% for category in catArray %}                
                                                      &lt;li&gt;&lt;a href="{{ category.link|raw }}" title="{{ category.name|raw }}"&gt;{{ category.name|raw }}&lt;/a&gt;&lt;/li&gt;                          
                                                      {% endfor %}
                                              &lt;/ul&gt;
                                          &lt;/div&gt;
                                          {% for whereis in whereisAll%} 
                                              &lt;div class="btitleWhereis margintop10 hidden-md hidden-xs hidden-sm"&gt;
                                                  &lt;a class="whereislink" href="{{ whereis.link|raw }}" title="{{ whereis.name|raw }}"&gt;
                                                      &lt;div class="bg"&gt;&lt;/div&gt;
                                                      &lt;div class="px"&gt;&lt;/div&gt;
                                                      &lt;div class="padd categories"&gt;&lt;h4 class="visible-lg categoriesh4"&gt;{{ whereis.name|raw }}&lt;/h4&gt;&lt;/div&gt;
                                                  &lt;/a&gt;
                                              &lt;/div&gt;
                                          {% endfor %}
  
                                      &lt;/div&gt;
                                  &lt;/div&gt;
             &lt;/div&gt;   
  </code></pre>
  
  <p>css</p>
  
  <pre><code>#alwaysvisible.stick {
  margin-top: 0 !important;
  position: fixed;
  top: 0;
  z-index: 10;
  float: right;
  padding-left: 0;
  width: 10%;
  padding-right: 10px; 
  }
  </code></pre>
  
  <p>but the problem is that i have a lot of content in the tab content with a fixed position not all the content are shown , i tried to add a new class  on scroll and giving the content an overflow-y:scroll but it doesn't work (the content is not visible anymore ) so what i should do in order to make it work and the content scroll is the best solution for this ? or their is a best way to make it happen ?</p>
  
  <p>thanks in advance </p>