0

私のボックスが私のページと一緒に下にスクロールしたいのですが、このスクリプトは彼女の私のコードでは機能しないようです：

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コード：

    <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>

そしてこれは私の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";
    }
  };

};
4

1 に答える 1

1

タグを設定position:absoluteしてaいないboxので、設定してもタグのtop位置には影響しません。divに移動positionすると、正常に動作するはずです。

/* 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;
}
于 2013-01-12T13:31:17.950 に答える