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

時間 2019-11-13

標籤 position fixed scroll 實現 div 浮動示例欄目 CSS 简体版

原文原文鏈接

前言

　　在本身建站的過程當中，要實現一個div隨滾動條浮動的效果，網上找了些示例不太好用，仍是本身動手，豐衣足食，寫的很差請你們諒解，畢竟我不是搞前端的，由於本身建站畢竟每一步都必須本身來，這邊只是作個記錄。javascript

position:fixed

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

　　上面是從博客園中複製下來的代碼，放到本地本身調試，固然你們能夠看到好的頁面或者效果，能夠搞下來研究。上面的效果能夠看出樣式中加了個position:fixed;屬性，公告欄不隨着滾動條的滾動而變化位置，其實這個效果也能夠知足一些需求。這個默認固定在左上部，咱們須要定位在右上部加個right:10px;屬性便可：html

　　咱們見到有的網站上面的導航條隨着滾動條固定在頂部，就是這種方法實現，對於不搞前端的來講可能以爲很難，其實就這麼簡單。前端

不要高估別人，低估本身，其實深刻心裏，不少你自覺得很了不得的人，其實也沒什麼，真是這樣。java

　　有點跑偏啊，只是多想了點，對於一些你未曾接觸到的領域，以爲很遙遠，接觸了，你會發現，其實也就這樣。jquery

scroll

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

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

　　關於scroll的一些方法和屬性不止這些，上面三個是咱們要用到的，關於其餘的你們能夠搜下相關解釋，咱們看下實現代碼。ide

　　樣式代碼和html代碼：post

 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。