-
Notifications
You must be signed in to change notification settings - Fork 29
/
index4.html
137 lines (133 loc) · 9.26 KB
/
index4.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
<!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;}
.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;}
#startBottom{color:red;}
</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 fixStartBottom = $(".fix-startBottom");
fixStartBottom.scrollFix({startBottom:"#startBottom"});
})
</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 id="startBottom">这是#startBottom的末端这是#startBottom的末端这是#startBottom的末端这是#startBottom的末端 </div>
<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" id="fixFooter">
<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">这是#fixFooter的位置</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">这是距离底部300像素位置</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 active 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>
</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 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>