Just for illustration:
<div id="fixed-image"></div>
If we suppose that the HTML provided above is your served content. You can include this CSS:
#fixed-image {
width: 100%;
height: 100px;
background-color: red;
position: fixed;
bottom: 0;
}
In your situation, you may want to consider adding a class with the specified styling.
JS Fiddle: http://jsfiddle.net/df6tmLrg/
Another demonstration using your JavaScript:
http://codepen.io/FakeHeal/pen/qEgxKN (since jsfiddle does not permit document.write)
var bbimagebannerfile = "https://avatars2.githubusercontent.com/u/1038697?v=3&s=460";
document.write("<a href=\"%%__REDIRECT%%\" target=\"_blank\" class=\"bottom-fixed\"><img src=\"" + bbimagebannerfile + "\" border=\"0\" width="100" /></a>");
And the corresponding CSS:
.bottom-fixed {
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
}
UPDATE:
For those using jQuery, exploit .scroll():
var t = $("#fixed-image").offset().top;
$(document).scroll(function(){
if($(this).scrollTop() > t)
{
$("#fixed-image")
.css('position', 'fixed') // modify position to fixed
.css('top',0); // adjust top to zero
} else {
$("#fixed-image")
.css('position', 'static') // modify position to static
.css('top',0); // adjust top to zero
}
});
Here's a demonstration:
http://jsfiddle.net/df6tmLrg/2/