下拉加载
<!
DOCTYPE
html>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
></
title
>
<
style
type
=
"text/css"
>
*
{
margin
:
0
px
;
padding
:
0
px
;
}
#header
{
position
:
fixed
;
top
:
0
px
;
left
:
0
px
;
width
:
100
%
;
height
:
50
px
;
background
:
#FAA732
;
text-align
:
center;
line-height
:
50
px
;
color
:
white;
font-weight
:
bold
;
}
#main
{
position
:
absolute
;
top
:
50
px
;
left
:
0
px
;
right
:
0
px
;
bottom
:
51
px
;
padding
:
10
px
;
overflow
:
auto
;
}
#main
li
{
display
:
flex
;
margin-bottom
:
10
px
;
padding
:
10
px
;
border-bottom
:
1
px
solid
gray;
border-radius
:
4
px
;
background
:
#EEE
;
}
#main
li
img
{
flex
:
50
px
0
0
;
width
:
50
px
;
height
:
50
px
;
padding
:
4
px
;
border
:
1
px
solid
green;
}
#main
li
span
{
padding-left
:
4
px
;
line-height
:
24
px
;
}
#footer
{
display
:
flex
;
position
:
fixed
;
left
:
0
px
;
bottom
:
0
px
;
width
:
100
%
;
height
:
50
px
;
border-top
:
1
px
solid
gray;
background
:
#FAA732
;
}
#footer
div
{
flex
:
1
;
text-align
:
center;
line-height
:
50
px
;
color
:
white;
font-weight
:
bold
;
border-right
:
1
px
solid
white;
}
#footer
div
:
nth-child
(
4
)
{
border
:
none
;
}
#footer
.active
{
background
:
#0086FF
;
}
</
style
>
</
head
>
<
body
>
<
header
id
=
"header"
>首 页</
header
>
<
section
id
=
"main"
>
<
ul
id
=
"list_box"
></
ul
>
</
section
>
<
footer
id
=
"footer"
>
<
div
class
=
"active"
>首页</
div
>
<
div
>商城</
div
>
<
div
>其他</
div
>
<
div
>我的</
div
>
</
footer
>
<
script
src
=
"js/jquery-1.8.3.min.js"
></
script
>
<
script
type
=
"text/javascript"
>
var
page
=
1
,
//分页码
off_on
=
false
,
//分页开关(滚动加载方法 1 中用的)
timers
=
null
;
//定时器(滚动加载方法 2 中用的)
function
diu_Randomize
(
b
,
e
){
if
(
!
b
&&
b
!=
0
|| !
e){
return
"?"
;}
return
Math.floor( ( Math.random()
*
e )
+
b );
}
//加载数据
var
LoadingDataFn
=
function
() {
var
dom
=
''
;
for
(
var
i
=
0
; i
<
20
; i
++
) {
dom
+=
'<li><img src="
http://b-ssl.duitang.com/uploads/item/201409/12/20140912132553_5Wcx3.jpeg"/
><span>上滑列加载表内容上滑列加载表内容上滑列加载表内容上滑列加载表内容</span></li>'
;
}
$(
'#list_box'
).append(dom);
off_on
=
true
;
//[重要]这是使用了 {滚动加载方法1} 时 用到的 ！！！[如果用 滚动加载方法1 时：off_on 在这里不设 true的话， 下次就没法加载了哦！]
};
//初始化， 第一次加载
$(
document
).
ready
(
function
() {
LoadingDataFn();
});
//底部切换
$(
document
.body).on(
'click'
,
'#footer div'
,
function
() {
$(
this
).addClass(
'active'
).siblings().removeClass(
'active'
);
});
//滚动加载方法1
/*$('#main').scroll(function() {
//当时滚动条离底部60px时开始加载下一页的内容
if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {
//这里用 [ off_on ] 来控制是否加载 （这样就解决了 当上页的条件满足时，一下子加载多次的问题啦）
if (off_on) {
off_on = false;
page++;
console.log("第"+page+"页");
LoadingDataFn(); //调用执行上面的加载方法
}
}
});*/
//滚动加载方法2（可用）
/*$('#main').scroll(function() {
//当时滚动条离底部60px时开始加载下一页的内容
if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {
clearTimeout(timers);
//这里还可以用 [ 延时执行 ] 来控制是否加载 （这样就解决了 当上页的条件满足时，一下子加载多次的问题啦）
timers = setTimeout(function() {
page++;
console.log("第" + page + "页");
LoadingDataFn(); //调用执行上面的加载方法
}, 300);
}
});*/
//还可以基window窗口（body）来添加滚动事件, (因为布局不同,所以在这里没效果，因为[上面是基于body中的某个元素来添加滚动事的])
$(
window
).
scroll
(
function
() {
//当时滚动条离底部60px时开始加载下一页的内容
if
((
parseInt(
$(
window
).height()
+
$(
window
).scrollTop()
+
60）
)
>=
$(
document
).height()) {
clearTimeout(timers);
timers
=
setTimeout
(
function
() {
page
++
;
console
.log(
"第"
+
page
+
"页"
);
LoadingDataFn();
},
300
);
}
});
$(
window
).
scroll
(
function
() {
var
$this
=
$(
this
),
scrollTop
=
$(
this
).scrollTop();
//滚动高度 ;
if
(scrollTop
>= "68"
) {
$(
".xianshi"
).
css
(
'display'
,
"block"
);
}
else
{
$(
".xianshi"
).
css
(
'display'
,
"none"
);
}
});
滑动到快底部时吸到最底部，否则一直在屏幕最下面
<
div
class
=
"op-bott clearfix"
style
=
"
display
:
none
;
"
>
/*底部导航*/
.op-bott
{
width
:
100
%
;
background-color
:
#5E5757
;
color
:
#fff
;
margin-top
:
44
px
;
position
:
fixed
;
bottom
:
0
;
width
:
100
%
;
}
$(
window
).
scroll
(
function
(){
if
($(
window
).scrollTop()
<
180
){
$(
".op-bott"
).hide();
$(
".op-bott"
).
css
(
"margin-bottom"
,
"0"
);
}
else
{
$(
".op-bott"
).show();
$(
".op-bott"
).
css
(
"margin-bottom"
,
"0"
);
}
});
$(
document
).
scroll
(
function
() {
var
fT
=
parseInt($(
'.pri-total'
).offset().top);//
pri-total 上一个元素
sT
=
parseInt($(
document
).scrollTop()
+
$(
window
).height());
//页面滚动的距离+可视窗口的距离
fT
=
fT
+
120
;
//+自身元素的高度
if
(sT
>=
fT) {
$(
'.op-bott'
).
css
({
'position'
:
'static'
})
}
else
{
$(
'.op-bott'
).
css
({
'position'
:
'fixed'
,
'margin-bottom'
:
'0'
})
}
})
</
script
>
</
body
>
</
html
>
$(
window
).
scroll
(
function
(){
var
fohi
=
$(
".footer.over-hidden"
).offset().top
-
500
;
var
hijie
=
parseInt($(
window
).height()
+
$(
window
).scrollTop()
+
$(
".footer"
).height);
var
dohi
=
$(
document
).
height
()
if
(hijie
>=
dohi ) {
$(
'.other-left'
).
css
(
'top'
,fohi);
}
else
{
let
height
=
$(
document
).scrollTop();
$(
'.other-left'
).show();
$(
'.other-left'
).
css
(
'top'
,height);
}
});
if
($(
'.catalog'
).hasClass(
"active"
)){
var
acor
=
parseInt($(
'.catalog .active'
).
offset().top
-
200
);
$(
".scroll_cont"
).animate({scrollTop
:
acor},
1000
);
}
var userCenter=parseInt($('#user_center').offset().top);
$(window).scroll(function() {
var $this = $(this),
scrollTop = $(this).scrollTop(); //滚动高度 ;
if (scrollTop >= (userCenter-15)) {
// $(".left_nav").addClass("left_nav_top");
$(".left_nav").css("position","fixed");
$(".left_nav").css("top","88px");
} else {
// $(".left_nav").removeClass("left_nav_top");
$(".left_nav").css("position","absolute");
$(".left_nav").css("top","0px");
}
});
2245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
