1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>右側固定漂浮</title> 5 <style type="text/css"> 6 .plateR 7 { 8 float: right; 9 display: inline; 10 position: relative; 11 zoom: 1; 12 border:2px solid red; 13 } 14 #rightmenu li 15 { 16 font-size: 13px; 17 } 18 li 19 { 20 font-size: 10pt; 21 font-style: normal; 22 width: 180px; 23 table-layout: fixed; 24 word-wrap: break-word; 25 } 26 a:visited, a:active, a:link 27 { 28 color: #2E9CE9; 29 text-decoration: none; 30 } 31 </style> 32 <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 33 <script type="text/javascript"> 34 //檢查瀏覽器是否支持fixed樣式 35 $.support.fixed = !document.all || document.all && document.compatMode == "CSS1Compat" && window.XMLHttpRequest; 36 $(document).ready(function () { 37 //jQuery 擴展方法 38 // 隨滾動條滑動而滑動 39 if (typeof (jQuery) != "undefined") { 40 jQuery.fn.extend({ 41 scrollFollow: function (opts) { 42 var os = this; 43 //默認參數定義 44 //動畫持續時間 45 var duration = 200; 46 //上邊距 47 var offset = 60; 48 49 //獲取函數傳入的參數 50 if (opts) { 51 if (!isNaN(opts.duration)) { 52 duration = parseInt(opts.duration); 53 } 54 if (!isNaN(opts.offset)) { 55 offset = parseInt(opts.offset); 56 } 57 } 58 //定義css默認屬性，預處理 59 os.each(function () { 60 var o = $(this); 61 o.css('position', 'absolute').appendTo('body'); 62 }); 63 64 var wnd = $(window); 65 //響應滾動條滾動事件 66 $(window).scroll(function () { 67 var scrollPos = wnd.scrollTop(); 68 if (scrollPos > 210) { 69 if ($.support.fixed) { 70 var refixed = function () { 71 var wnd = $(window); 72 var scrollLeft = (wnd.width() + wnd.scrollLeft() - 780) / 2 + 879; 73 $('#divEditresume_r').css({ position: 'fixed', top: 0, left: scrollLeft }); 74 }; 75 refixed(); 76 } else { 77 os.stop(); 78 os.each(function () { 79 var o = $(this); 80 var callback = function () { 81 for (var i in os.depend) { 82 try { 83 os.depend[i](); 84 } catch (e) { continue; } 85 } 86 }; 87 o.animate({ 'top': scrollPos }, duration, callback); 88 }); 89 90 } 91 } 92 else { 93 if ($.support.fixed) { 94 var refixed = function () { 95 var wnd = $(window); 96 var scrollLeft = (wnd.width() + wnd.scrollLeft() - 780) / 2 + 879; 97 $('#divEditresume_r').css({ position: 'fixed', top: offset - scrollPos, left: scrollLeft }); 98 }; 99 refixed(); 100 } else { 101 os.stop(); 102 os.each(function () { 103 var o = $(this); 104 var callback = function () { 105 for (var i in os.depend) { 106 try { 107 os.depend[i](); 108 } catch (e) { continue; } 109 } 110 }; 111 o.animate({ 'top': offset }, duration, callback); 112 }); 113 } 114 } 115 }); 116 return this; 117 }, 118 depend: new Array(), 119 addDepend: function (fn) { 120 this.depend.push(fn); 121 } 122 }); 123 } 124 //綁定滾動事件 125 $('#divEditresume_r').scrollFollow({ duration: 200, offset: 210 }); 126 //設置起始位置 127 remove(); 128 //瀏覽器的寬度發送改變時重新設置其樣式 129 $(window).resize(function () { 130 remove(); 131 }); 132 }); 133 134 function remove() { 135 var w = document.body.clientWidth; 136 //獲取瀏覽器的寬度 137 var wnd = $(window); 138 //獲取簡歷操作菜單的寬度 139 var resumeOperate = 170; 140 //設置初始位置 141 var position = function () { 142 var scrollTop = wnd.scrollTop() + 210; 143 var scrollLeft = (wnd.width() + wnd.scrollLeft() - 780) / 2 + 879; 144 $('#divEditresume_r').css({ top: scrollTop + 'px', left: scrollLeft + 'px' }); 145 } 146 var init = function () { 147 position(); 148 } 149 init(); 150 } 151 </script> 152 </head> 153 <body style="height: 2000px;"> 154 <div class="plateR" id="divEditresume_r"> 155 <ul> 156 <li><a href="http://www.cnblogs.com/yuyangweiwei/archive/2013/01/29/2880959.html">1. 157 vs.net代碼段管理器應用(0)</a></li> 158 <li><a href="http://www.cnblogs.com/yuyangweiwei/archive/2012/06/01/2530928.html">2. 159 後臺添加css和js(0)</a></li> 160 <li><a href="http://www.cnblogs.com/yuyangweiwei/archive/2012/06/01/2530810.html">3. 161 js屏蔽鼠標鍵盤(0)</a></li> 162 <li><a href="http://www.cnblogs.com/yuyangweiwei/archive/2012/04/10/2439990.html">4. 163 asp.net去除字符串中html標籤(0)</a></li> 164 </ul> 165 </div> 166 </body> 167 </html>
注：由於IE6不支持position:fixed，所以會用position：absolute，有跳動的效果。