È necessario correggere div durante lo scorrimento rimanere 20px dall'alto

Question

Non sono sicuro che sia possibile farlo con puro CSS o se devo usare jQuery per farlo.

Ho un div (product_image) che nel suo stato attuale si trova a circa 400px dall'alto e posizionato relativo in modo da cancellare il menu principale e l'intestazione, quello che devo fare è quando un utente scorre verso il basso e arriva a circa 20px dalla parte superiore del div, ho bisogno che div diventi fisso.

Ecco cosa ho provato, ho il div principale con posizionamento relativo quindi ho un altro div che avvolge tutto all'interno con posizionamento fisso. Il problema è che il div rimane fermo a 400px dall'alto.

Ecco il codice:

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

E il CSS

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

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

Spero di aver fatto la domanda abbastanza chiaro, io non riesco a trovare una soluzione a questo giro così ringrazio in anticipo per il tuo aiuto!

Answer 1

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