jquery实现浮动层效果

层可以随着页面滚动而滚动，说明肯定是脱离了标准流的，CSS样式表 position:absolute;因为是上下移动，所以

就是要改变层的CSS样式中的top属性定位），在jquery中有一个scrollTop属性，用于获取页面滚动的高度。所以在每次页面滚动

的时候，将浮动层的高度设置为 （初始值）+ scrollTop即可。  但是scrollTop在ie和其他浏览器中的获取有不一样，可以通过

如下方式

：       var bodyTop = 0;

            if (typeof window.pageYOffset != 'undefined') {

                bodyTop = window.pageYOffset; 

          } else if (

typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')

{                bodyTop = document.documentElement.scrollTop;            }

            else if (typeof document.body != 'undefined') { 

              bodyTop = document.body.scrollTop; 

          }

 

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 < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
5 < title > 无标题文档 </ title >
6 < script type ="text/javascript" src ="../jquery-1.3.1.js" ></ script >
7 <!-- /*以为是上下滚动，所以搞改变滚动的top属性（绝对定位），在jquery中有一个scrollTop属性，用于获取页面滚动的高度。所以在每次页面滚动的时候，将浮动层的高度设置为 （初始值）+ scrollTop即可。
8
9 但是scrollTop在ie和其他浏览器中的获取有不一样，可以通过如下方式：
10 var bodyTop = 0;
11 if (typeof window.pageYOffset != 'undefined') {
12 bodyTop = window.pageYOffset;
13 } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
14 bodyTop = document.documentElement.scrollTop;
15 }
16 else if (typeof document.body != 'undefined') {
17 bodyTop = document.body.scrollTop;
18 }
19 */ -->
20
21 < script type ="text/javascript" >
22 jQuery(document).ready( function ($){
23 $(window).scroll( function () {
24 var bodyTop = 0 ;
25 if ( typeof window.pageYOffset != ' undefined ' ) {
26 bodyTop = window.pageYOffset
27 } else if ( typeof document.compatMode != ' undefined ' && document.compatMode != ' BackCompat ' ) {
28 bodyTop = document.documentElement.scrollTop
29 } else if ( typeof document.body != ' undefined ' ) {
30 bodyTop = document.body.scrollTop
31 }
32 $( " #hellobaby " ).css( " top " , 250 + bodyTop)
33 });
34 });
35
36 </ script >
37 < style type ="text/css" >
38 #hellobaby {
39 background : #000 ;
40 color : #fff ;
41 border : 1px solid #B3B3B3 ;
42 font-size : 14px ;
43 right : 0 ;
44 position : absolute ;
45 top : 250px ;
46 opacity : .7 ;
47 filter : alpha(opacity=70) ;
48 padding : 10px ;
49 }
50 #hellobaby a {
51 color : orange ;
52 text-decoration : none ;
53 }
54 .closebox {
55 position : absolute ;
56 right : 5px ;
57 top : 0 ;
58 }
59 </ style >
60 </ head >
61 < body >
62 < div style ="height:1600px;" >
63 我爱beyond网，全国最大的公益性纪念beyond网站,www.ilovebeyond.com < br />
64 我爱beyond网，全国最大的公益性纪念beyond网站,www.ilovebeyond.com < br />
65 我爱beyond网，全国最大的公益性纪念beyond网站,www.ilovebeyond.com < br />
66 我爱beyond网，全国最大的公益性纪念beyond网站,www.ilovebeyond.com < br />
67 我爱beyond网，全国最大的公益性纪念beyond网站,www.ilovebeyond.com < br />
68 我爱beyond网，全国最大的公益性纪念beyond网站,www.ilovebeyond.com < br />
69 我爱beyond网，全国最大的公益性纪念beyond网站,www.ilovebeyond.com < br />
70 我爱beyond网，全国最大的公益性纪念beyond网站,www.ilovebeyond.com < br />
71 我爱beyond网，全国最大的公益性纪念beyond网站,www.ilovebeyond.com < br />
72 我爱beyond网，全国最大的公益性纪念beyond网站,www.ilovebeyond.com < br />
73 我爱beyond网，全国最大的公益性纪念beyond网站,www.ilovebeyond.com < br />
74 我爱beyond网，全国最大的公益性纪念beyond网站,www.ilovebeyond.com < br />
75 我爱beyond网，全国最大的公益性纪念beyond网站,www.ilovebeyond.com < br />
76 我爱beyond网，全国最大的公益性纪念beyond网站,www.ilovebeyond.com < br />
77 我爱beyond网，全国最大的公益性纪念beyond网站,www.ilovebeyond.com < br />
78 我爱beyond网，全国最大的公益性纪念beyond网站,www.ilovebeyond.com < br />
79 我爱beyond网，全国最大的公益性纪念beyond网站,www.ilovebeyond.com < br />
80 我爱beyond网，全国最大的公益性纪念beyond网站,www.ilovebeyond.com < br />
81 我爱beyond网，全国最大的公益性纪念beyond网站,www.ilovebeyond.com < br />
82 我爱beyond网，全国最大的公益性纪念beyond网站,www.ilovebeyond.com < br />
83 我爱beyond网，全国最大的公益性纪念beyond网站,www.ilovebeyond.com < br />
84 我爱beyond网，全国最大的公益性纪念beyond网站,www.ilovebeyond.com < br />
85 我爱beyond网，全国最大的公益性纪念beyond网站,www.ilovebeyond.com < br />
86 我爱beyond网，全国最大的公益性纪念beyond网站,www.ilovebeyond.com < br />
87 我爱beyond网，全国最大的公益性纪念beyond网站,www.ilovebeyond.com < br />
88 我爱beyond网，全国最大的公益性纪念beyond网站,www.ilovebeyond.com < br />
89 我爱beyond网，全国最大的公益性纪念beyond网站,www.ilovebeyond.com < br />
90 我爱beyond网，全国最大的公益性纪念beyond网站,www.ilovebeyond.com < br />
91 我爱beyond网，全国最大的公益性纪念beyond网站,www.ilovebeyond.com < br />
92 </ div >
93 < div id ="hellobaby" > 推荐您 < a href ="http://www.ilovebeyond.com" target ="_blank" > 点击这里 </ a > 订阅我爱beyond网 o(∩_∩)o
94 < div class ="closebox" > < a href ="javascript:void(0)" onclick ="$('#hellobaby').slideUp('slow');$('.closebox').css('display','none');" title ="关闭" > × </ a > </ div >
95 </ div >
96 </ body >
97 </ html >

转载于:https://www.cnblogs.com/wifi/articles/2595150.html