Question

I’want that my box scroll down with my page but this script seem dosn’t work her’s 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";
    }
  };

};

Answer 1

You have set position:absolute on the a tags not box so setting top will not affect its position. Move position to the div and it should work fine:

/* Print and Download Buttons */
#box {
    position:absolute;
    right:765px;
    top:271px;
}

a.print {
    background:#f00;
    border:1px solid #ccc;
    display:block;
    height:24px;
    padding:2px;
    text-indent:-9999px;
    width:24px;
    z-index:110;
}

a.download {
    background:#c00;
    border:1px solid #ccc;
    display:block;
    height:24px;
    padding:2px;
    position:absolute;
    text-indent:-9999px;
    width:24px;
    z-index:111;
}

a.print:hover, a.download:hover {
    padding-right:12px;
}