I have a page where I want to run a long image along the right hand column, halfway down the page. There is a header on the page, before the content, which pushes this image down about 300px. I'm using fixed positioning to allow the image to follow users, as they scroll down the page.
This works fine until I use a browser which is smaller in size and cuts off the bottom of the image. As I scroll down the page, the image still follows me, but remains always cut off, even though with the header out of view, there should be enough room to accommodate it.
Is there any way to position this to remain fixed as I scroll, BUT to align it to the top of the browser when scrolling down?
All I have is this right now. I'm still wrapping my head around css, and just can't find a solution to it:
<div id="right_image" style="margin-top:0; position:fixed; width:150px; height:700px; display:block; border:none;"></div>
If you specify bottom:0px (or another value) then it will always stay fixed to the bottom of the page and won't be cut off at the bottom.
EDIT -- add the following script to the page to do what was discussed in the comments (you can remove the jquery reference if you've already got it):
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script language='javascript' type='text/javascript'>
$(document).scroll(function() {
if($(this).scrollTop()==0) $('#right_image').css('bottom', '');
else $('#right_image').css('bottom', '0px');
});
</script>
let me know if this works