title: CSS , Jquery: Adding class during scroll
body: <p>I am learning jquery and I am stuck with the <code>addClass</code> function. During scroll, I am adding a class which changes a sidebar div to have fixed positioning, it is being taken out of flow and the content on the right (both the sidebar and the content on the right have <code>float:left</code> set.) is taking its place. But, I want to avoid that. I would like the content on the right to stay where it is and the sidebar to scroll. Here is the html and css:</p>
  
  <p><strong>Dependencies</strong></p>
  
  <pre><code>&lt;script src="assets/js/jquery.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="assets/css/reset.css"&gt;&lt;/link&gt;
  &lt;link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css"&gt;&lt;/link&gt;
  </code></pre>
  
  <p><strong>Jquery</strong></p>
  
  <pre><code>$(window).scroll(function(){
      var a=$('.sidebar-inner');
      var p=a.offset().top;
      var q=$(window).scrollTop();
      var r=$('.sidebar-inner').parent().offset().top;
      if(p-q&lt;40){
          a.addClass("fixed-sidebar");
      }
      else{ 
          if(p-r&lt;20){
              a.removeClass("fixed-sidebar");
          }
      }
  });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>html, body {
      background-color:rgb(229,229,229);
      height:100%;
      margin:0;
      padding:0;
  }
  .strip {
      min-height:200px;
  }
  .large-strip {
      min-height:300px;
  }
  .fixed-sidebar {
      position:fixed;
      top:20px;
  }
  .sidebar {
      float:left;
      width:270px;
      margin-left:-20px;
      opacity:1.0;
  }
  .sidebar-inner {
      margin-top:20px;
      width:256px;
  }
  .sidebar-inner ul {
      list-style:none outside none  border:1px solid black;
  }
  .sidebar-inner ul li {
      padding:0px 10px;
      border:1px solid;
      line-height:20px;
  }
  .main {
      margin-top:20px;
      margin-left:10px;
      padding:10px;
      width:200px;
      float:left;
  }
  .div1 {
      background-color:white;
      height:auto !important;
      min-height: 300%;
      width:auto;
      /*margin:0px auto -40px;*/
      border:1px solid;
  }
  .div1 .wide {
      display:block;
      border:1px solid black;
  }
  .div1 .div1_1 {
      width:50%;
      background-color:#fff;
      display:inline-block;
  }
  .div1 .div1_2 {
      display:inline-block;
      width:50%;
  }
  .footer {
      min-height:40px;
      border:1px solid black;
  }
  </code></pre>
  
  <p><strong>BODY</strong></p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="div1"&gt;
          &lt;div class="div1_1"&gt;
              This is div 1_1
          &lt;/div&gt;&lt;!--
          --&gt;&lt;div class="div1_2"&gt;
              This div 1_2
          &lt;/div&gt;
          &lt;div class="wide strip"&gt;
          &lt;/div&gt;
          &lt;div class="wide large-strip"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class=" sidebar"&gt;
                          &lt;div class="sidebar-inner"&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;Item 1&lt;/li&gt;
                                  &lt;li&gt;Item 2&lt;/li&gt;
                                  &lt;li&gt;Item 3&lt;/li&gt;
                                  &lt;li&gt;Item 4&lt;/li&gt;
                                  &lt;li&gt;Item 5&lt;/li&gt;
                                  &lt;li&gt;Item 6&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="main"&gt;
                          &lt;div class="content"&gt;
                              This is content
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;p class="test"&gt;
  
          &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="footer"&gt;
          This is footer
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>On scrolling the sidebar div scrolls down with scroll bar ,but while this happens the div containing "This is content" is taking its place, which I want to avoid. Can I add some attribute to a div to solve this?
  I might be missing something trivial here. But I am not able to find it. Thanks for the help.</p>
  
  <p>JSfiddle - <a href="http://jsfiddle.net/nAwEz/" rel="nofollow">http://jsfiddle.net/nAwEz/</a></p>