-
Notifications
You must be signed in to change notification settings - Fork 29
/
index3.html
137 lines (133 loc) · 9.07 KB
/
index3.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;}
#startTop{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 fixStartTop = $(".fix-startTop");
fixStartTop.scrollFix({startTop:"#startTop"});
})
</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" id="startTop">这里是ID为startTop，也就是传说中右侧元素开始固定的位置啦</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" 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 active 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>
</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>
</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>