JS實現網頁右側固定的浮動層

xpkdi 9年前發布 | 2K 次閱讀 JavaScript JavsScript 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

    <html xmlns="http://www.w3.org/1999/xhtml"&gt;

    <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>  </pre>
 本文由用戶 xpkdi 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！