div悬浮窗

效果：

 

source：

 

<div class="r_nav" id="rightNavbox">
         <ul>
             <li><a href="#" target="_blank">电脑整机</a></li>
              <li><a href="#" target="_blank">数码分会场</a></li>
              <li><a href="#" target="_blank">手机分会场</a></li>
                <li><a href="#">电脑配件</a></li>
              <li><a href="#" target="_blank">电脑周边</a></li>
          </ul>
            <a href="#" class="return">返回主会场</a>
        </div>
   <script type="text/javascript">
var tips; var theTop = 250; var old = theTop;
   function initFloatTips() {
      tips = document.getElementById('rightNavbox');
      moveTips();
   };
   
   function moveTips() {
      var tt=50;
      if (window.innerHeight) {
         pos = window.pageYOffset
      }else if (document.documentElement && document.documentElement.scrollTop){
        pos = document.documentElement.scrollTop
    }else if (document.body) {
        pos = document.body.scrollTop;
    }
     pos=pos-tips.offsetTop+theTop;
     pos=tips.offsetTop+pos/10;
     if (pos < theTop) pos = theTop;
     if (pos != old) {
        tips.style.top = pos+"px";
        tt=10;
    }
   old = pos;
   setTimeout(moveTips,tt);
       }
          initFloatTips();
        </script>    

<style type="text/css">
.r_nav {
    background: url("images/r_nav.png") no-repeat scroll center top transparent;
    height: 212px;
    padding: 100px 0 0 5px;
    position: absolute;
    right: 50px;
    top: 562px;
    width: 93px;
 
 color: #ffffff;
    font-family:Arial,Lucida,Verdana,Helvetica,sans-serif;
    font-size: 12px;
    line-height: 150%;
}

</style>

转载于:https://www.cnblogs.com/osmond/archive/2011/12/20/2294929.html