JS实现网页右侧固定的浮动层

2018-07-20    来源:open-open

容器云强势上线!快速搭建集群,上万Linux镜像随意使用
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>无标题文档</title>  
      
    <style type="text/css">  
    body  
    {  
        margin:0px;  
        padding:0px;  
        margin-top:60px;  
        margin-bottom:60px;  
    }  
        
    #div_nav_zone_right  
    {  
        position:absolute;  
        float:right;  
        z-index:3;  
        width:120px;  
        height:100px;  
        right:0px;  
        top: 332px;  
        background-color:#999;  
    }  
      
    #div_nav_zone_right_bottom  
    {  
        position:absolute;  
        float:right;  
        z-index:3;  
        width:120px;  
        height:100px;  
        right:0px;  
        top: 532px;  
        background-color:#CCC;  
    }  
      
    #div_ul  
    {   
        position:fixed;   
        height:50px;  
    }  
      
    ul,li  
    {  
        margin:0px;  
    }  
    li  
    {  
        list-style:none;  
    }  
    </style>   
    <script type="text/javascript" src="js/jquery.js" ></script>  
    <script type="text/javascript">   
    $(function()  
    {  
               moveDiv(); //页面初始化执行  
               $(window).scroll(function(){    
                    moveDiv();  
                    moveRightBottomDiv();  
               });  
      
    });  
      
    //右侧居中  
    function moveDiv()  
    {   
           var scrollTop = $(document).scrollTop();   //滚动条上端隐藏的高度  
           var clientHeight = $(window).height(); //网页内容区高度   
           //设置位置为   
           var hei = $("#div_nav_zone_right").css("height");  
           hei = hei.replace("px","");   
           var newPosY = scrollTop + (clientHeight-hei)/2;  
           $("#div_nav_zone_right").css("top",newPosY+"px");   
    }  
    //右侧居下100像素  
    function moveRightBottomDiv()  
    {   
           var scrollTop = $(document).scrollTop();   //滚动条上端隐藏的高度  
           var clientHeight = $(window).height(); //网页内容区高度   
           //设置位置为   
           var hei = $("#div_nav_zone_right_bottom").css("height");  
           hei = hei.replace("px","");   
           var newPosY = clientHeight + scrollTop - hei - 100;  
           $("#div_nav_zone_right_bottom").css("top",newPosY+"px");   
    }  
    </script>  
    </head>  
      
    <body>   
    1  <br/>2  <br/>3  <br/>4  <br/>5  <br/>6  <br/>7  <br/>8  <br/>9  <br/>10  <br/>  
    <p>sd</p>  
    <p>f</p>   
    <p> </p>  
    <p>ads</p>  
    <p>f</p>  
    <p>ads</p>  
    <p>   
      <input type="button" name="button" id="button" value="提交" onclick="clk()" />  
    </p>  
    <p>ad</p>  
    <p>sf AS  
      D  
      as  
      d  
      SA  
      D  
      </p>  
    <p> </p>  
    <p>ads</p>  
    <p>f</p>  
    <p>ads</p>  
      sad  
      SA  
      D  
      a  
      d  
      A  
      D  
        
      a    
       
      
    <div id="div_nav_zone_right" >   
         <ul>  
                <li>边栏菜单1  </li>  
                <li>边栏菜单2 </li>  
                <li>边栏菜单3  </li>  
                <li>边栏菜单4  </li>  
            </ul>  
    </div>  
      
      
    <div id="div_nav_zone_right_bottom" >   
         <ul>  
                <li>边栏菜单1  </li>  
                <li>边栏菜单2 </li>  
                <li>边栏菜单3  </li>  
                <li>边栏菜单4  </li>  
            </ul>  
    </div>  
    </body>  
    </html>  

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点!
本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。

上一篇:统计项目源码行数的Java代码

下一篇:python编写简单抽奖系统