-
Notifications
You must be signed in to change notification settings - Fork 29
/
Copy pathindex5.html
135 lines (131 loc) · 10.2 KB
/
index5.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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动停在底部300像素-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="滚动停在底部300像素-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;}
</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">固定停留在底部的300像素位置</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 fixbottom = $(".fix-bottom");
fixbottom.scrollFix({endPos:300});
})
</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?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, tempore, placeat, cupiditate soluta impedit inventore labore perferendis molestiae aut et blanditiis atque eaque</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 active 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!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!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!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!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>