-
Notifications
You must be signed in to change notification settings - Fork 29
/
index2.html
136 lines (132 loc) · 8.99 KB
/
index2.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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动到距离顶部20像素开始固定-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="滚动到距离顶部20像素开始固定-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;}
.fix-top{margin-bottom: 20px;}
</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">距离顶部20像素代码：滚动到距离浮动元素的顶部20像素位置开始固定</h3>
<div class="widget-box">
<pre><code><script type="text/javascript" src="js/scrollfix.min.js"></script>
<script type="text/javascript">
$(function(){
var fixtop = $(".fix-top");
fixtop.scrollFix({distanceTop:20});
})
</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" 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 active 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 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="js/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>