-
Notifications
You must be signed in to change notification settings - Fork 29
/
Copy pathindex6.html
150 lines (143 loc) · 9.97 KB
/
index6.html
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动停在底部某个标签的位置-jquery滚动固定插件：scrollfix演示-前端博客</title>
<link type="image/x-icon" href="https://qdkfweb.cn/favicon.ico" rel="icon">
<link type="image/x-icon" href="https://qdkfweb.cn/favicon.ico" rel="shortcut icon">
<link rel="stylesheet" href="reset.css"/>
<meta name="keywords" content="前端博客,代码演示" />
<meta name="description" content="滚动停在底部某个标签的位置-jquery滚动固定插件：scrollfix演示，前端博客代码演示，caibaojian.com，前端代码范例，演示代码" />
<style type="text/css">
.main{width:820px; margin:0 auto; }
.content{float:left; width:500px; text-align: left;}
.path{margin-bottom: 40px;}
.sidebar{float:right; width:300px; text-align: left; position: relative;}
.widget{border:1px solid #eee; margin-bottom:20px;}
.widget-title{border-bottom:1px solid #eee; font-size:12px; line-height:24px; padding-left:10px;}
.widget-box{padding:10px;}
.content .widget{border:1px solid #eee; padding:10px; font-size:14px; text-align: left; margin-bottom: 20px; max-width:478px;}
.active{background: #ddd;}
.content .widget h3{font-size:18px; line-height: 2;}
</style>
</head>
<body>
<div class="main">
<div class="path">你的位置：<span xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a href="https://qdkfweb.cn" rel="v:url" property="v:title">前端博客</a></span> >
<span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="https://qdkfweb.cn/c/front">优秀前端开发</a></span> > <span typeof="v:Breadcrumb"><span class="breadcrumb_last" property="v:title"><a href="https://qdkfweb.cn/scrollfix">jQuery插件：滚动固定在某个位置</a></span></span>
</span></div>
<div class="content">
<div class="widget">
<h3 class="widget-title">固定停留在某个标签位置</h3>
<div class="widget-box">
<p>有时候你并不知道要停留在的位置距离底部有多少像素，你只知道它需要停在这个位置，那么你只需要知道这里的元素标签是什么就可以了</p>
<pre><code><script type="text/javascript" src="js/scrollfix.min.js"></script>
<script type="text/javascript">
$(function(){
var fixfooter = $(".fix-footer")
fixfooter.scrollFix({endPos:"#fixFooter"})
})
</script></code></pre>
</div>
</div>
<div class="widget">
<h3 class="widget-title">这只是内容，效果看侧栏</h3>
<div class="widget-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, culpa, officia, tempore, et vel earum delectus obcaecati ducimus at voluptates odio aliquid quis nulla illo veniam non dolorem molestias voluptas!</div>
</div>
<div class="widget">
<h3 class="widget-title">这只是内容，效果看侧栏</h3>
<div class="widget-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, consequatur, dolorem eaque culpa ut iste tempora molestias repudiandae magni quo excepturi sapiente nisi reprehenderit omnis ea! Libero aspernatur fugit beatae?</div>
</div>
<div class="widget">
<h3 class="widget-title">这只是内容，效果看侧栏</h3>
<div class="widget-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, consequatur, dolorem eaque culpa ut iste tempora molestias repudiandae magni quo excepturi sapiente nisi reprehenderit omnis ea! Libero aspernatur fugit beatae?</div>
</div>
<div class="widget">
<h3 class="widget-title">这只是内容，效果看侧栏</h3>
<div class="widget-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, consequatur, dolorem eaque culpa ut iste tempora molestias repudiandae magni quo excepturi sapiente nisi reprehenderit omnis ea! Libero aspernatur fugit beatae?</div>
</div>
<div class="widget">
<h3 class="widget-title">这只是内容，效果看侧栏</h3>
<div class="widget-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, consequatur, dolorem eaque culpa ut iste tempora molestias repudiandae magni quo excepturi sapiente nisi reprehenderit omnis ea! Libero aspernatur fugit beatae?</div>
</div>
<div class="widget">
<h3 class="widget-title">这只是内容，效果看侧栏</h3>
<div class="widget-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, consequatur, dolorem eaque culpa ut iste tempora molestias repudiandae magni quo excepturi sapiente nisi reprehenderit omnis ea! Libero aspernatur fugit beatae?</div>
</div>
<div class="widget">
<h3 class="widget-title" id="fixFooter">这是#fixFooter底部开始停靠的位置</h3>
</div>
<div class="widget">
<h3 class="widget-title">这只是内容，效果看侧栏</h3>
<div class="widget-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, consequatur, dolorem eaque culpa ut iste tempora molestias repudiandae magni quo excepturi sapiente nisi reprehenderit omnis ea! Libero aspernatur fugit beatae?</div>
</div>
<div class="widget">
<h3 class="widget-title">这只是内容，效果看侧栏</h3>
<div class="widget-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, consequatur, dolorem eaque culpa ut iste tempora molestias repudiandae magni quo excepturi sapiente nisi reprehenderit omnis ea! Libero aspernatur fugit beatae?</div>
</div>
<div class="widget">
<h3 class="widget-title">这只是内容，效果看侧栏</h3>
<div class="widget-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, consequatur, dolorem eaque culpa ut iste tempora molestias repudiandae magni quo excepturi sapiente nisi reprehenderit omnis ea! Libero aspernatur fugit beatae?</div>
</div>
<div class="widget">
<h3 class="widget-title">这只是内容，效果看侧栏</h3>
<div class="widget-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, consequatur, dolorem eaque culpa ut iste tempora molestias repudiandae magni quo excepturi sapiente nisi reprehenderit omnis ea! Libero aspernatur fugit beatae?</div>
</div>
</div>
<div class="sidebar">
<div class="widget fix">
<h3 class="widget-title"><a href="index.html">默认滚动到这里开始固定</a></h3>
<div class="widget-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, consequatur, dolorem eaque culpa ut iste tempora molestias repudiandae magni quo excepturi sapiente nisi reprehenderit omnis ea! Libero aspernatur fugit beatae?</div>
</div>
<div class="widget fix-top">
<h3 class="widget-title"><a href="index2.html">滚动到距离这里顶部20像素开始固定</a></h3>
<div class="widget-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, culpa, officia, tempore, et vel earum delectus obcaecati ducimus at voluptates odio aliquid quis nulla illo veniam non dolorem molestias voluptas!</div>
</div>
<div class="widget fix-startTop">
<h3 class="widget-title"><a href="index3.html">滚动到一个标签#startTop的头部开始固定</a></h3>
<div class="widget-box">Top Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, itaque, deleniti, et, odio molestias consectetur eos quisquam cumque quia consequuntur quaerat pariatur debitis soluta! Iste modi asperiores voluptatibus veniam laborum.<div id="startTop">这是#start</div></div>
</div>
<div class="widget fix-startBottom">
<h3 class="widget-title"><a href="index4.html">滚动到一个标签#startBottom的末端开始固定</a></h3>
<div class="widget-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, earum aliquid quia facere dolorum nam ipsa quae ullam ea laboriosam deleniti perferendis similique odit at ducimus rerum porro maxime aut.<div id="startBottom">这是#startBottom的末端这是#startBottom的末端这是#startBottom的末端这是#startBottom的末端 </div></div>
</div>
<div class="widget fix-bottom">
<h3 class="widget-title"><a href="index5.html">滚动停在底部300像素</a></h3>
<div class="widget-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, obcaecati, omnis eaque dolorem quam inventore ipsum dignissimos non esse doloremque qui consequatur eius fuga aspernatur facere corporis porro sit distinctio!</div>
</div>
<div class="widget active fix-footer">
<h3 class="widget-title"><a href="index6.html">滚动停在底部#fixFooter的位置</a></h3>
<div class="widget-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, officia libero quia animi voluptates autem quae voluptate aut. Iusto, iste, at dolor fugiat nisi nihil ea dicta nostrum voluptates ducimus?</div>
</div>
<h3><a href="index7.html">混合例子1：距离顶部20像素，在某个标签开始固定，停靠在底部300像素位置</a></h3>
<h3><a href="index8.html">混合例子2：距离顶部10像素，在某个标签底部固定，停靠在底部某个标签位置</a></h3>
</div>
</div>
<script src="http://lsibs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
<!--
!window.jQuery && document.write('<script src=js/jquery.js><\/script>');
//-->
</script>
<script src="js/scrollfix.js"></script>
<script type="text/javascript">
$(function(){
var fix = $(".fix"), fixtop = $(".fix-top"), fixStartTop = $(".fix-startTop"), fixStartBottom = $(".fix-startBottom"), fixbottom = $(".fix-bottom"), fixfooter = $(".fix-footer");
//第一种情况
// fix.scrollFix();
//第二种情况
//fixtop.scrollFix({distanceTop:20});
//第三种情况
//fixStartTop.scrollFix({startTop:"#startTop"});
//第四种情况
//fixStartBottom.scrollFix({startBottom:"#startBottom"});
//第五种情况
//fixbottom.scrollFix({endPos:300});
//第六种情况
fixfooter.scrollFix({endPos:"#fixFooter"})
})
</script>
<script type="text/javascript" src="https://qdkfweb.cn/demo/base.js" charset="UTF-8"></script>
</body>
</html>