scrollfixed.js
3.06 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
/**
* 滚动悬浮
*
*/
define( 'scrollfixed', function( require, exports ) {
var scrollfixed = function( target, options ) {
this.target = target;
this.opt = {
startFixed : 0, // 开始悬浮的位置
endFixed : null, //结束悬浮的位置
baseClassName: 's-header-fixed' , //悬浮时添加的class名
setWidth:false,//设宽度
scrollCallback: function(){}, // 执行悬浮后的回调
endscrollCallback:function(){}// 结束悬浮后的回调
};
this.place = null; //添加容器补充悬浮空间
this.originalPosition = $( this.target ).css( 'position' ); // 获取初始position值用于回补
$.extend( this.opt, options );
this.init();
};
scrollfixed.prototype = {
/*
初始方法
*/
init:function(){
var t = $( this.target ),
_this = this;
// 鼠标滚动调用悬浮
$( window ).on( 'scroll', function(){
_this.getScroll();
});
},
/*
获取悬浮对象高宽等属性
*/
getProperties:function(){
var t = $( this.target ),
properties = {
_height : t.outerHeight(),
_width : t.outerWidth(),
_top : t.offset().top
};
return properties;
},
/*
容器填充以免页面整体高度发生变化
*/
placeholder:function(){
var t = $( this.target ), _this = this , _p = this.getProperties();
_this.place = $( '<div style="height:'+ _p._height + 'px"></div>' );// 这里暂时只设置了高度 其他在css中处理就好
_this.place.insertBefore( t );
},
/*
悬浮层方法
*/
getScroll:function(){
var t = $( this.target ) ,
_this = this ,
scrollTop = $(window).scrollTop(),
_p = this.getProperties();
var ie6 = !-[1, ] && !window.XMLHttpRequest; //IE6判断
var _position = ie6 ? 'absolute' : 'fixed' ;
// 取消悬浮 滚动条高度小于等于开始悬浮的位置 或者到达结束悬浮的位置
if( ( scrollTop <= _this.opt.startFixed ) ||
( ( scrollTop > _this.opt.startFixed ) && _this.opt.endFixed != null && !isNaN( _this.opt.endFixed ) && ( scrollTop - _p._height ) >= _this.opt.endFixed ) ){
t.removeClass( _this.opt.baseClassName ).css({
'position' : _this.originalPosition
});
if( _this.place != null ){
$( _this.place ).remove();
_this.place = null;
}
//设置悬层宽度
// if( _this.opt.setWidth ){
// var _b = parseFloat( t.css( 'border-width' ) );
// t.css({
// 'width' : 'auto'
// });
// }
_this.opt.endscrollCallback();
}
// 开始悬浮设置
else{
if( _this.place == null ){
_this.placeholder();
}
t.css({
'position' : _position
}).addClass( _this.opt.baseClassName );
//设置悬层宽度
if( _this.opt.setWidth ){
var _bl = !isNaN( parseFloat( t.borderLeftWidth ) ) ? parseFloat( t.borderLeftWidth ) : 1,
_br = !isNaN( parseFloat( t.borderRightWidth ) ) ? parseFloat( t.borderRightWidth ) : 1;
t.css({
'width' : ( $( _this.place ).width() - _bl - _br ) + "px"
});
}
_this.opt.scrollCallback();
}
}
};
return scrollfixed;
});