title: Jquery Scroll Event Doesn't work
body: <p>I'm looking to make a div appear when a page is scrolled down. The thing is that my page body has overflow hidden as well as most of other divs except the table that appears at some point on the page when the button is pressed. So that table has overflow:scroll as needed and I try to hook that scroll event on it. But it doesn't work anyway. What can it be? </p>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;body&gt;  
    &lt;div class="maine"&gt;
  &lt;table id="tableToClone" class="ts"&gt;
    &lt;div class="backtotopplank"&gt;&lt;/div&gt;
                      &lt;/table&gt;  
    &lt;/div&gt;   
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html, body{
    height:100%;
    background:black;
    width:100%;
  }
  
  .ts  {  
    background:red;
      border-collapse:collapse;
      border-spacing:0;
    margin:auto auto;
      width:70%;
    height:3000px;
      overflow:scroll;
  }
  
  
  .maine{
    width:70%;
    margin:auto auto;
    background:white; 
    position:relative;
      overflow-x:hidden;  
  }
  
  .backtotopplank{
      background:black;
      background-size:100% 100%;
      position:fixed;
      width:153px;
      height:56px;
      left:900px;
      bottom:0px;
      cursor: pointer;
  display:none;
  }
  </code></pre>
  
  <p>And JQuery:</p>
  
  <pre><code>$(".ts").scroll(function() {
    var y = $(this).scrollTop();
    if (y &gt; 400) {
      $(".backtotopplank").fadeIn();
    } else {
      $(".backtotopplank").fadeOut();
    }
  });
  </code></pre>