title: jQuery to Detect Scrolling Div Position
body: <p>I have a bit of problem trying to detect scrolling position on my divs. This is my code: </p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;div id="wrapper"&gt;
    &lt;div id="headerOne"&gt;I am a header&lt;/div&gt;
    &lt;div id="contentContainer"&gt;
      &lt;div id="content"&gt;
        I am some content
      &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery function (not working version)</strong></p>
  
  <pre><code>$(document).ready(function() {
  
      var aboveHeight = $('#headerOne').outerHeight();
  
  $('#contentContainer').scroll(function(){
        if ($('#contentContainer').scrollTop() &gt; aboveHeight){
        $('#headerOne').addClass('fixed').css('top','0').next().css('padding-top','60px');
        } else {
        $('#headerOne').removeClass('fixed').next().css('padding-top','0');
       }
      });
    });
  </code></pre>
  
  <p><strong>jQuery function (working version)</strong></p>
  
  <pre><code>$(document).ready(function() {
  
      var aboveHeight = $('#headerOne').outerHeight();
  
  $(window).scroll(function(){
        if ($(window).scrollTop() &gt; aboveHeight){
        $('#headerOne').addClass('fixed').css('top','0').next().css('padding-top','60px');
        } else {
        $('#headerOne').removeClass('fixed').next().css('padding-top','0');
       }
      });
    });
  </code></pre>
  
  <p>There are two different jQuery function because when I first tested I was using the <strong>working version</strong> and the header stays when scrolling down. But I want the header header to stay fixed user is scrolling <code>#contentContainer</code> div not the window so I change it to <code>$(window).</code> to <code>$('#contentContainer')</code> and it's not working anymore.</p>
  
  <p>Can scroll feature detect div scrolling or must it be <code>$(window).</code> ?</p>
  
  <p>Thank you. </p>