CSS or jQuery Fixed sidebar in site layout
My site is set up using a content structure like
<body>
<div id="header></div>
<div id="contentwrapper">
<div id="content>
...
</div>
<div id="sidebar">
...
</div>
</div>
<div id="footer"></div>
</body>
I am trying to get my site to behave when the sidebar remains at the same location as in my static layout. That it is to the right of the Content column, that it is below the div header and above the div footer, and that if they squeeze the window horizontally, it does not move over the content column.
I tried fixed position google generic css etc. and I was not able to find anything that really worked with me, so it asks me here. I am looking for how to handle this using css or javascript, if it goes along the javascript route, I would prefer jQuery as the base.
. , , ie6 , (, 't )
+3
2
javascript, ,
<script type="text/javascript">
$(window).scroll(function() {
$('#sidebarPage1').css('top', $(this).scrollTop() + "px");
});
</script>
, , , , .
: , jQuery. .
<script type="text/javascript">
$(window).scroll(function() {
$('#sidebarPage1').animate({ top: $(window).scrollTop() + "px" },
{ queue: false, duration: 500, easing: 'easeInOutSine' });
});
</script>
, - , .
+11