Need to fix div when scrolling stay 20px from top

css, html, jquery

Solution

Used to jquery

Jquery

$(document).ready(function() {
    var s = $("#sticker");
    var pos = s.position();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();

        if (windowpos >= pos.top) {
            s.addClass("stick");
        } else {
            s.removeClass("stick"); 
        }
    });
});

Css

div#wrapper {
    margin:0 auto;
    width:500px;
    background:#FFF;
}
div#mainContent {
    width:160px;
    padding:20px;
    float:left;
}
div#sideBar {
    width:130px;
    padding:20px;
    margin-left:30px;
    float:left;
}
.clear { 
    clear:both; 
}
div#sticker {
    padding:20px;
    margin:20px 0;
    background:#AAA;
    width:190px;
}
.stick {
    position:fixed;
    top:0px;
}

HTML

<div id="wrapper">
  <div id="mainContent">
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
  </div>
  <div id="sideBar">Some content here 
    <!--Some content in your right column/sidebar-->
    <div id="sticker">...This is scroll here </div>
  </div>
  <div class="clear"></div>
</div>

Demo

More About

Problem

I am not sure wether this can be done with pure CSS or if I need to use some jQuery to do this. I have a div (product_image) that in its current state sits at about 400px from the top and positioned relative so it clears the top menu and header, what I need to do is when a user scrolls down and gets to about 20px from the top of the div, I need the div to become fixed. Here's what I have tried, I have the main div with relative positioning then I have another div wrapping everything inside with fixed positioning. The problem is that the div is staying put at 400px from the top. Here's the code: ``` <div class="product_image"> <div class="product_image_fixed"> <a href="products/1.jpg" class="zoom" title="A bed!" rel="gal1"> <img src="products/1.jpg" width="450" alt="" title="A bed!"> </a> <ul id="thumblist" class="clearfix" > <li><a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'products/1.jpg',largeimage: 'products/1.jpg'}"><img src='products/1.jpg' width="150" height="100"></a></li> <li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'products/1a.jpg',largeimage: 'products/1a.jpg'}"><img src='products/1a.jpg' width="150" height="100"></a></li> </ul> </div> </div> ``` And the CSS ``` .product_image { position: relative; float: left; width: 450px; margin-left: 10px; margin-top: 10px; } .product_image_fixed { position: fixed; float: left; } ``` I hope I have made the question clear enough, I can't seem to find a solution to this around so I thank you in advance for your help!

Original source