jQuery实现页面滚动时智能浮动定位

网站问题 2018-12-18 阅读量: 791 TAG:

本文主要介绍了jQuery实现页面滚动时智能浮动定位的方法。附上完整代码，具有一定的参考价值，下面一起来看下吧
话不多说，请看代码：

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

< !DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现页面滚动时层智能浮动定位_前端开发</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font: 12px/1.8 Arial;
color: #666;
}
h1.tit-h1 {
font-size: 38px;
text-align: center;
margin: 30px 0 15px;
color: #f60;
}
.wrap {
border: 1px dashed #ccc;
background: #f8f8f8;
padding: 20px;
}
.demo {
height: 1500px;
}
.float {
width: 80px;
padding: 10px;
border: 1px solid #ffecb0;
background-color: #fffee0;
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.2);
box-shadow: 1px 1px 2px rgba(0,0,0,.2);
position: absolute;
right: 10%;
top: 131px;
}
</style>
<script type="text/javascript" src="/js/jquery.min.js"></script>
</head>
<body>
<h1 class="tit-h1">jQuery实现页面滚动时层智能浮动定位_前端开发</h1>
<div class="wrap">
<div class="demo"></div>
<div class="float" id="float">我在这里等你噢！</div>
</div>
<script type="text/javascript">
$.fn.smartFloat = function() {
var position = function(element) {
var top = element.position().top, pos = element.css("position");
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0

});
} else {
element.css({
top: scrolls
});
}
}else {
element.css({
position: "absolute",
top: top
});
}
});
};
return $(this).each(function() {
position($(this));
});
};
//绑定
$("#float").smartFloat();
</script>

</body>
</html>

注意顺序js需要放在浮动内容后面

浅唱6（微信/QQ号：909912499），欢迎分享本文，转载请保留出处！部分内容来自网络，如有侵权请联系删除处理！

浅唱6

热门文章

jQuery实现页面滚动时智能浮动定位

相关信息

关于本站

联系我们

友情链接