I need my box to scroll down with the page, but the script I'm using doesn't seem to be working. Here is my code:
CSS
/* Print and Download Buttons */
#box {top: 271px;}
a.print{ background:#ffffff url(images/bg-print.jpg) no-repeat top center; border:1px solid #ccc; display:block; height:24px; padding:2px;
position:absolute; right:765px; text-indent:-9999px; top:271px; width:24px; z-index:110; }
a.download{ background:#ffffff url(images/bg-download.jpg) no-repeat top center; border:1px solid #ccc; display:block; height:24px; padding:2px;
position:absolute; right:765px; text-indent:-9999px; top:300px; width:24px; z-index:111; }
a.print:hover, a.download:hover{ padding-right:12px; }
HTML Code :
<script type="text/javascript" src="_layout/js/costum.js"></script> <!--The Js file call !-->
<!-- My div Box that's i want to scroll down !-->
<div id="box">
<a href="javascript:window.print()" id="print" title="Print CV" class="tip print">Print CV</a>
<a href="#" id="download" title="Download CV" class="tip download">Download CV</a>
</div>
And this is my costum.js
window.onload = function() {
function getScrollTop() {
if (typeof window.pageYOffset !== 'undefined' ) {
// Most browsers
return window.pageYOffset;
}
var d = document.documentElement;
if (d.clientHeight) {
// IE in standards mode
return d.scrollTop;
}
// IE in quirks mode
return document.body.scrollTop;
}
window.onscroll = function() {
var box = document.getElementById('box'),
scroll = getScrollTop();
if (scroll <= 300) {
box.style.top = "300px";
}
else {
box.style.top = (scroll + 2) + "px";
}
};
};