Нужно исправить div при прокрутке 20px сверху

Question

Я не уверен, что это можно сделать с помощью чистого CSS или если мне нужно использовать некоторые jQuery для этого.

У меня есть div (product_image), который в своем текущем состоянии находится примерно в 400px от верхнего и расположенного родственника, поэтому он очищает верхнее меню и заголовок, что мне нужно сделать, когда пользователь прокручивается и приближается к 20px от вершины div, мне нужно, чтобы div стал фиксированным.

Вот что я пробовал, у меня есть главный div с относительным позиционированием, тогда у меня есть другой div, который обертывает все внутри с фиксированным позиционированием. Проблема в том, что div остается на 400px сверху.

Вот код:

<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> 

И CSS

.product_image { 
    position: relative; 
    float: left; 
    width: 450px; 
    margin-left: 10px; 
    margin-top: 10px; 
} 

.product_image_fixed { 
    position: fixed; 
    float: left; 
} 

Я надеюсь, что я сделал этот вопрос достаточно ясно, что я не могу найти решение этой проблемы вокруг, так что я благодарю вы заранее за вашу помощь!

Answer 1

Используется для 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