原文:position:fixed和scroll實現div浮動【示例】

前言

　　在自己建站的過程中，要實現一個div隨滾動條浮動的效果，網上找了些示例不太好用，還是自己動手，豐衣足食，寫的不好請大家諒解，畢竟我不是搞前端的，因為自己建站畢竟每一步都必須自己來，這邊只是做個記錄。

position:fixed

　　實現浮動主要有個css屬性：position:fixed，從單詞上就知道是固定的意思，這邊就用我博客的公告欄做個示例：

?

　　上面是從博客園中復制下來的代碼，放到本地自己調試，當然大家可以看到好的頁面或者效果，可以搞下來研究。上面的效果可以看出樣式中加了個position:fixed;屬性，公告欄不隨著滾動條的滾動而變化位置，其實這個效果也可以滿足一些需求。這個默認固定在左上部，我們需要定位在右上部加個right:10px;屬性即可：

　　我們見到有的網站上面的導航條隨著滾動條固定在頂部，就是這種方法實現，對于不搞前端的來說可能覺得很難，其實就這么簡單。

不要高估別人，低估自己，其實深入內心，很多你自以為很了不起的人，其實也沒什么，真是這樣。

　　有點跑偏啊，只是多想了點，對于一些你不曾接觸到的領域，覺得很遙遠，接觸了，你會發現，其實也就這樣。

scroll

　　有時候有這種情況：在指定的地方浮動和不浮動，這種情況只是上面的position:fixed屬性就實現不了了，要結合滾動條滾動事件scroll，使用scroll事件需要注意要結合一些屬性和方法。

• scrollTop()方法的意思：對象的最頂部到對象在當前窗口顯示的范圍內的頂邊的距離，可以理解為滾動條從上面開始滾動的距離。
• offsetTop屬性的意思：當前對象到其上級層頂部的距離，這個是指定對象的。
• offsetHeight屬性的意思：當前對象的高度值，這個值是不會隨著滾動條變化的。

　　關于scroll的一些方法和屬性不止這些，上面三個是我們要用到的，關于其他的大家可以搜下相關解釋，我們看下實現代碼。

　　樣式代碼和html代碼：

1 .canfloat 2 { 3 position: fixed; 4 top: 10px; 5 } 6 .newsItem 7 { 8 width: 220px; 9 float: right; 10 padding: 0px 0px 5px; 11 margin-bottom: 2em; 12 } 13 .newsItem .catListTitle 14 { 15 text-align: left; 16 padding: 5px 10px; 17 border: 1px solid #CCC; 18 background: none repeat scroll 0% 0% #F0F0F0; 19 } 20 .catListTitle 21 { 22 font-weight: bold; 23 line-height: 1.5em; 24 font-size: 110%; 25 margin-top: 15px; 26 margin-bottom: 10px; 27 border-bottom: 1px solid #000; 28 text-align: center; 29 } View Code 1 <div> 2 <div style="height: 2500px; float: left;"> 3 </div> 4 <div class="newsItem"> 5 <div style="height: 500px;"> 6 </div> 7 <div> 8 我只是占位的 9 </div> 10 <div id="floatdiv" class="canfloat"> 11 <h3 class="catListTitle"> 12 公告</h3> 13 <div id="blog-news"> 14 <a style="padding-right: 20px;" href="http://wpa.qq.com/msgrd?v=3&amp;uin=624541997&amp;site=qq&amp;menu=yes" 15 target="_blank"> 16 <img style="vertical-align: bottom; border: 0px" src="http://wpa.qq.com/pa?p=1:624541997:13" 17 alt="點擊這里給我發消息"></a> 18 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" 19 id="honehoneclock" align="middle" height="70" width="160"> 20 <param name="allowScriptAccess" value="always"> 21 <param name="movie" value="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf"> 22 <param name="quality" value="high"> 23 <param name="bgcolor" value="#ffffff"> 24 <param name="wmode" value="transparent"> 25 <embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf" 26 quality="high" bgcolor="#ffffff" name="honehoneclock" allowscriptaccess="always" 27 type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" 28 align="middle" height="70" width="160"></object> 29 <div id="profile_block"> 30 昵稱：<a href="http://home.cnblogs.com/u/xishuai/">田園里的蟋蟀</a><br> 31 園齡：<a href="http://home.cnblogs.com/u/xishuai/" title="入園時間：2012-08-07">1年6個月</a><br> 32 粉絲：<a href="http://home.cnblogs.com/u/xishuai/followers/">137</a><br> 33 關注：<a href="http://home.cnblogs.com/u/xishuai/followees/">10</a><div id="p_b_follow"> 34 </div> 35 </div> 36 <script type="text/javascript"> loadBlogNews();</script> 37 </div> 38 </div> 39 </div> 40 </div> View Code

　　js代碼：

1 $(function () { 2 $(window).scroll(function () { 3 var ref_min = $("#floatdiv")[0]; 4 if (!ref_min) return; 5 var scroll_top = $(window).scrollTop(); 6 var ref_height_min = ref_min.offsetTop + $("#floatdiv")[0].offsetHeight; 7 if (scroll_top > ref_height_min) { 8 $("#floatdiv").addClass("canfloat"); 9 } else { 10 $("#floatdiv").removeClass("canfloat"); 11 } 12 }); 13 });

　　scroll_top獲取當前滾動條滾動的距離，ref_height_min是開始浮動的距離，大于的話就開始浮動，小于的話就不浮動，代碼看起來是沒什么問題，我們看下運行效果：

　　上面的效果基本上沒什么問題，但是仔細看下就會發現，浮動框在不該浮動的地方浮動，在該浮動的地方浮動，好像是距離的判斷出現問題，問題出在哪？就在ref_min.offsetTop這句代碼，如果我們實現的是從頂部開始滾動，這段代碼是不會出現問題的，因為ref_min.offsetTop始終保持一致（如果設置浮動框和開始浮動寬的距離頂端高度設置一樣），如果不從頂端開始浮動，當開始浮動的時候，浮動框距離頂部的值是一定的，我們想要的應該是變化的，所有就會出現上面的問題。

解決問題

　　解決上面的問題其實很簡單，就是不用浮動框獲取距離頂端的高度，用一個標記來記錄，我們修改一下上面的代碼：

　　html代碼：

1 <div> 2 <div style="height: 2500px; float: left;"> 3 </div> 4 <div class="newsItem"> 5 <div style="height: 500px;"> 6 </div> 7 <div> 8 我只是占位的 9 </div> 10 <div id="sign" title="我只是記錄的"> 11 </div> 12 <div id="floatdiv" class="canfloat"> 13 <h3 class="catListTitle"> 14 公告</h3> 15 <div id="blog-news"> 16 <a style="padding-right: 20px;" href="http://wpa.qq.com/msgrd?v=3&amp;uin=624541997&amp;site=qq&amp;menu=yes" 17 target="_blank"> 18 <img style="vertical-align: bottom; border: 0px" src="http://wpa.qq.com/pa?p=1:624541997:13" 19 alt="點擊這里給我發消息"></a> 20 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" 21 id="honehoneclock" align="middle" height="70" width="160"> 22 <param name="allowScriptAccess" value="always"> 23 <param name="movie" value="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf"> 24 <param name="quality" value="high"> 25 <param name="bgcolor" value="#ffffff"> 26 <param name="wmode" value="transparent"> 27 <embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf" 28 quality="high" bgcolor="#ffffff" name="honehoneclock" allowscriptaccess="always" 29 type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" 30 align="middle" height="70" width="160"></object> 31 <div id="profile_block"> 32 昵稱：<a href="http://home.cnblogs.com/u/xishuai/">田園里的蟋蟀</a><br> 33 園齡：<a href="http://home.cnblogs.com/u/xishuai/" title="入園時間：2012-08-07">1年6個月</a><br> 34 粉絲：<a href="http://home.cnblogs.com/u/xishuai/followers/">137</a><br> 35 關注：<a href="http://home.cnblogs.com/u/xishuai/followees/">10</a><div id="p_b_follow"> 36 </div> 37 </div> 38 <script type="text/javascript"> loadBlogNews();</script> 39 </div> 40 </div> 41 </div> 42 </div> View Code

　　js代碼：

1 $(function () { 2 $(window).scroll(function () { 3 var ref_min = $("#sign")[0]; 4 if (!ref_min) return; 5 var scroll_top = $(window).scrollTop(); 6 var ref_height_min = ref_min.offsetTop + $("#floatdiv")[0].offsetHeight; 7 if (scroll_top > ref_height_min) { 8 $("#floatdiv").addClass("canfloat"); 9 } else { 10 $("#floatdiv").removeClass("canfloat"); 11 } 12 }); 13 });

　　上面的html只是浮動框上部加了個div標記來記錄浮動高度，var ref_min = $("#sign")[0];獲取的是標記的浮動高度，而不是浮動框的浮動高度。這樣基本上可以解決上面出現的問題，我們看下運行效果：

　　完整代碼：

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 .canfloat 7 { 8 position: fixed; 9 top: 10px; 10 } 11 .newsItem 12 { 13 width: 220px; 14 float: right; 15 padding: 0px 0px 5px; 16 margin-bottom: 2em; 17 } 18 .newsItem .catListTitle 19 { 20 text-align: left; 21 padding: 5px 10px; 22 border: 1px solid #CCC; 23 background: none repeat scroll 0% 0% #F0F0F0; 24 } 25 .catListTitle 26 { 27 font-weight: bold; 28 line-height: 1.5em; 29 font-size: 110%; 30 margin-top: 15px; 31 margin-bottom: 10px; 32 border-bottom: 1px solid #000; 33 text-align: center; 34 } 35 </style> 36 <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 37 <script type="text/javascript"> 38 $(function () { 39 $(window).scroll(function () { 40 var ref_min = $("#sign")[0]; 41 if (!ref_min) return; 42 var scroll_top = $(window).scrollTop(); 43 var ref_height_min = ref_min.offsetTop + $("#floatdiv")[0].offsetHeight; 44 if (scroll_top > ref_height_min) { 45 $("#floatdiv").addClass("canfloat"); 46 } else { 47 $("#floatdiv").removeClass("canfloat"); 48 } 49 }); 50 }); 51 </script> 52 </head> 53 <body> 54 <div> 55 <div style="height: 2500px; float: left;"> 56 </div> 57 <div class="newsItem"> 58 <div style="height: 500px;"> 59 </div> 60 <div> 61 我只是占位的 62 </div> 63 <div id="sign" title="我只是記錄的"> 64 </div> 65 <div id="floatdiv" class="canfloat"> 66 <h3 class="catListTitle"> 67 公告</h3> 68 <div id="blog-news"> 69 <a style="padding-right: 20px;" href="http://wpa.qq.com/msgrd?v=3&amp;uin=624541997&amp;site=qq&amp;menu=yes" 70 target="_blank"> 71 <img style="vertical-align: bottom; border: 0px" src="http://wpa.qq.com/pa?p=1:624541997:13" 72 alt="點擊這里給我發消息"></a> 73 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" 74 id="honehoneclock" align="middle" height="70" width="160"> 75 <param name="allowScriptAccess" value="always"> 76 <param name="movie" value="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf"> 77 <param name="quality" value="high"> 78 <param name="bgcolor" value="#ffffff"> 79 <param name="wmode" value="transparent"> 80 <embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf" 81 quality="high" bgcolor="#ffffff" name="honehoneclock" allowscriptaccess="always" 82 type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" 83 align="middle" height="70" width="160"></object> 84 <div id="profile_block"> 85 昵稱：<a href="http://home.cnblogs.com/u/xishuai/">田園里的蟋蟀</a><br> 86 園齡：<a href="http://home.cnblogs.com/u/xishuai/" title="入園時間：2012-08-07">1年6個月</a><br> 87 粉絲：<a href="http://home.cnblogs.com/u/xishuai/followers/">137</a><br> 88 關注：<a href="http://home.cnblogs.com/u/xishuai/followees/">10</a><div id="p_b_follow"> 89 </div> 90 </div> 91 <script type="text/javascript"> loadBlogNews();</script> 92 </div> 93 </div> 94 </div> 95 </div> 96 </body> 97 </html> View Code

　　示例下載：scrollTop.rar

總結

以上是生活随笔為你收集整理的position:fixed和scroll实现div浮动【示例】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。