स्क्रॉल करते समय div को ठीक करने की आवश्यकता शीर्ष

Question

से मुझे 20px रहने की आवश्यकता है मुझे यकीन नहीं है कि यह शुद्ध सीएसएस के साथ किया जा सकता है या अगर मुझे ऐसा करने के लिए कुछ jQuery का उपयोग करने की आवश्यकता है।

मेरे पास एक div (product_image) है जो इसकी वर्तमान स्थिति में शीर्ष से लगभग 400px पर बैठता है और सापेक्ष तैनात होता है, इसलिए यह शीर्ष मेनू और शीर्षलेख को साफ़ करता है, जब मुझे उपयोगकर्ता स्क्रॉल करता है और उसके बारे में पता चलता है Div के शीर्ष से 20px, मुझे 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> 

और सीएसएस

.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; 
} 

एचटीएमएल

<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