Cần sửa lỗi div khi cuộn ở 20px từ trên cùng

Question

Tôi không chắc chắn rằng điều này có thể được thực hiện bằng CSS thuần túy hoặc nếu tôi cần sử dụng một số jQuery để thực hiện việc này.

Tôi có div (product_image) ở trạng thái hiện tại nằm cách khoảng 400px so với đầu và vị trí tương đối để nó xóa menu và tiêu đề trên cùng, điều tôi cần làm là khi người dùng cuộn xuống và đến 20px từ phía trên cùng của div, tôi cần div để trở thành cố định.

Đây là những gì tôi đã thử, tôi có div chính với vị trí tương đối sau đó tôi có một div gói tất cả mọi thứ bên trong với định vị cố định. Vấn đề là div được đặt ở 400px từ đầu.

Dưới đây là các mã:

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

Và CSS

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

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

Tôi hy vọng tôi đã thực hiện các câu hỏi rõ ràng đủ, tôi dường như không thể tìm thấy một giải pháp này xung quanh vì vậy tôi cảm ơn bạn trước sự giúp đỡ của bạn!

Answer 1

Dùng để 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