jquery - Need to fix div when scrolling stay 20px from top -
i not sure wether can done pure css or if need use jquery this.
i have div (product_image) in current state sits @ 400px top , positioned relative clears top menu , header, need when user scrolls down , gets 20px top of div, need div become fixed.
here's have tried, have main div relative positioning have div wrapping inside fixed positioning. problem div staying put @ 400px top.
here's 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 css
.product_image { position: relative; float: left; width: 450px; margin-left: 10px; margin-top: 10px; } .product_image_fixed { position: fixed; float: left; } i hope have made question clear enough, can't seem find solution around thank in advance help!
used 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"> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> content here <br /> </div> <div id="sidebar">some content here <!--some content in right column/sidebar--> <div id="sticker">...this scroll here </div> </div> <div class="clear"></div> </div> 
