-
Notifications
You must be signed in to change notification settings - Fork 18
/
demo.html
153 lines (121 loc) · 9.98 KB
/
demo.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
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>makefixed.js</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<div class="fixed-top">
<div class="container">
<h1>makefixed.js</h1>
<p class="lead fastuts" data-fastuts-tip="Let's start explaining this..." data-fastuts-order="1">A quick way to dynamically set up elements to be fixed during scroll</p>
</div>
</div>
<div class="container margin-top">
<!--
Hey!
Simple add a class added in MakeFixed selector. In this example, we've added the class .fixed
Also, we have added some extra attributes to customize the element position when it become fixed.
For example:
data-mfx-fix-at="100"
This gonna make your element fix when it reaches the scroll position of 100 pixels
data-mfx-top-position="20"
This will add a top space of 20 pixels
-->
<div class="fixed" id="menu-example" data-mfx-fix-at="100" data-mfx-top-position="20">
<button type="button" class="btn btn-success test-click">Fixed menu bar</button>
<button type="button" class="btn btn-success test-click">Fixed menu bar</button>
<button type="button" class="btn btn-success test-click">Fixed menu bar</button>
</div>
<hr>
<div>
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
<h4>Subheading</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur.</p>
<h4>Subheading</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
<div>
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
<h4>Subheading</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur.</p>
<h4>Subheading</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
<div class="fixed-with-callback text-right" id="photo">
<img src="http://lorempixel.com/450/227/" alt="" class="img-thumbnail" style="width: 450px; height: auto;">
</div>
<div>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, vel. Autem, ipsa, vero. Voluptates consequatur exercitationem rem ut magnam consequuntur, dolor libero ea suscipit, temporibus hic similique perferendis, deserunt soluta.</p>
<p>Hic quis optio quae, rerum velit repudiandae harum sit assumenda voluptate. Laborum cumque ad, iste ab, repellendus ducimus tenetur impedit quasi dolores maiores quidem repudiandae eos quia illo et illum.</p>
<p>Nisi eveniet sunt odit impedit obcaecati eos sed explicabo placeat molestiae natus fugit, tempora omnis, saepe distinctio est quisquam quis, consectetur voluptatum sint dicta unde. Nisi aliquid sint voluptates quidem.</p>
<p>Totam facilis ipsam modi omnis laborum amet quas ipsa, qui cum porro vel tempore unde, nobis repudiandae, odit tempora nam deleniti soluta. Vero id numquam molestias eaque alias temporibus voluptatem.</p>
<p>Laborum doloribus libero quidem autem tempore quod in quos, rerum eius, deserunt officiis aliquam alias maxime delectus vero consectetur? Itaque ullam, corporis, cumque labore vel mollitia nihil quasi soluta quidem.</p>
<p>Temporibus eligendi similique laudantium odio culpa consequuntur tenetur officiis perferendis, perspiciatis sit laborum adipisci fuga, ex hic vel quibusdam tempora quaerat quidem eius ab! Iusto vel, a sed! Ipsum, impedit.</p>
<p>Possimus praesentium est temporibus dolor saepe perferendis assumenda quaerat explicabo ex, adipisci blanditiis, tempore facilis nobis illum mollitia, eligendi neque atque, id ratione vero. Modi possimus laudantium iste fugiat, repellendus.</p>
<p>Ducimus quasi, delectus totam odit, iusto veritatis! Facilis inventore itaque assumenda ut, suscipit. Laborum, dolores perspiciatis ipsum perferendis earum eaque nam, unde quisquam! Perferendis unde a, accusantium, inventore neque ratione.</p>
<p>Consectetur ab quis sunt, quisquam exercitationem facilis numquam cumque debitis eveniet similique et, reiciendis eaque libero accusamus odio quae id eos asperiores autem non reprehenderit maiores doloremque! Alias, incidunt, eos!</p>
<p>Eos, illo nesciunt tempora consequuntur voluptatibus, eaque, accusamus natus atque animi ipsa nemo ipsum laborum vel dolorum nobis! Explicabo voluptates consectetur veritatis ad, reprehenderit corporis incidunt eligendi quod error ipsam.</p>
<p>Hic possimus modi repellat officiis animi et corrupti, ut quos. Officiis, iure, sint. Cum, animi nesciunt praesentium. Error ab laudantium tempore distinctio dolorum exercitationem aperiam eaque, possimus quas nam cum.</p>
<p>Numquam, iste iure fugit rerum, atque doloribus aspernatur, nisi recusandae omnis reiciendis provident distinctio accusantium quidem amet facere odit. Maiores porro ad explicabo, architecto nemo aut similique impedit esse reprehenderit.</p>
<p>Perferendis, asperiores alias labore quos adipisci voluptatem nesciunt ut aliquid iste dolor facere rerum illo ullam nihil molestiae aut doloribus ipsam aspernatur. At optio nihil, consequuntur velit praesentium, nemo laudantium.</p>
<p>Deleniti delectus eos minus velit repellat aliquid ratione, recusandae accusamus, illum consequuntur fuga quis ducimus! Temporibus sit architecto adipisci ipsa magni nam et eum totam mollitia, non aperiam, autem voluptatum.</p>
<p>Quis culpa quos officiis, quasi ratione, fugiat veniam maxime asperiores? Natus aut nemo vero iste libero enim quae ut repellat, quis saepe fugit, perferendis quas quasi voluptates quisquam quia repudiandae.</p>
<p>Maxime aut perspiciatis assumenda in ullam animi, a quasi, voluptate vitae obcaecati ex temporibus, vero quo nostrum nisi ipsa! Cumque expedita magnam iste consequatur natus, quam? Est culpa error praesentium!</p>
<p>Quaerat quam nobis recusandae voluptate delectus. Numquam aperiam hic dicta dolorum suscipit, ipsum sint, voluptatum repudiandae provident delectus doloribus dolor. Molestiae officiis quos repellat, deleniti aut laboriosam quisquam eveniet hic.</p>
<p>Porro quos facilis ipsa tenetur distinctio explicabo nesciunt eos quia minus, reiciendis quod praesentium quae pariatur ex natus quidem et similique labore neque excepturi harum, earum a illum inventore sequi.</p>
<p>Ad, culpa officiis beatae est quae quas ea, adipisci magni excepturi! At repudiandae temporibus magnam veniam vel, similique deleniti id nobis molestias. Omnis totam ratione quidem, perferendis aut similique sequi.</p>
<p>Voluptatem officiis animi sint quisquam inventore, qui, temporibus et sapiente non illum voluptate nesciunt asperiores. Suscipit quod alias praesentium fugiat ad corporis, labore reiciendis magni molestias sequi vitae, quia eum.</p>
<p>Maxime deserunt non autem modi perspiciatis libero et dolore, sed corrupti dignissimos dolorem enim blanditiis perferendis tempora ducimus, eligendi ratione, veritatis. Eaque, ad expedita tempore, cumque reiciendis quam ullam nam.</p>
<p>Incidunt repellendus repudiandae itaque, delectus voluptas aliquam consectetur, beatae similique totam, voluptatibus nam voluptatem illum natus fugit iusto recusandae magni eaque voluptatum. Assumenda numquam veritatis ex modi reiciendis, cum, autem.</p>
<p>Quod explicabo omnis, vitae molestiae, eos facere, blanditiis hic tempora consectetur expedita non, quos distinctio tempore dolorum. Mollitia quas, repudiandae. Autem ipsam natus, labore ex soluta. Repellendus omnis, nam tenetur.</p>
<p>Labore earum, omnis voluptatum fuga, quos architecto non quod libero esse recusandae ipsam asperiores dolor consectetur eos adipisci iste, deleniti dignissimos unde, dolores modi quasi aspernatur. Quasi, minima doloribus dignissimos!</p>
<p>Id aperiam error hic atque, ut molestiae. Eos sed, commodi ex cupiditate odio consectetur ipsam, asperiores dolor fugiat est, ab molestias voluptate ipsa earum eaque expedita officia. Laboriosam, delectus, quisquam.</p>
<p>Dicta error necessitatibus, nihil perspiciatis ullam optio numquam dolor tempora aperiam modi! Aliquam autem delectus at dicta repudiandae, veniam id pariatur est nihil consectetur. Earum sequi impedit quaerat laboriosam corrupti.</p>
<p>Repellat nam consequatur reprehenderit in. Aliquam totam, quis officia! Maxime, praesentium eligendi qui rerum dolore vitae quas! Temporibus quod quibusdam est ut dolorem! Facere nobis hic voluptas sed, eveniet consectetur.</p>
<p>Ducimus excepturi nobis, illo sequi repudiandae voluptatem ad aliquid vitae rerum nostrum, eveniet neque eos. Iste earum, voluptas magnam eveniet natus, alias repudiandae odio ut unde pariatur quidem? Repellat, saepe.</p>
<p>Dolore rerum itaque cumque magni quo, totam reprehenderit cupiditate esse, perferendis quasi non modi tempore, illum, porro incidunt saepe praesentium mollitia quisquam quos nulla distinctio. Sunt odio placeat, iusto labore.</p>
<p>Eaque doloribus maxime tempora quaerat accusamus aliquam vel nihil officiis? Quisquam modi culpa, hic voluptatem nihil sit alias, ea perferendis molestias laudantium veritatis fugiat vitae, eius provident odit dignissimos a.</p>
</div>
<hr>
<p>Like it? <a href="https://github.com/guimadaleno/makefixed.js" target="_blank">Star this project</a></p>
</div>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="makefixed.js"></script>
<script>
$(document).ready(function()
{
/* The easy way to enable MakeFixed */
$('.fixed').makeFixed();
/* If you need something more custom, use the callback functions */
$('.fixed-with-callback').makeFixed
({
onFixed: function (el)
{
if ($(el).attr('id') == 'photo')
{
$(el).children().css
({
width: '500px'
});
}
},
onUnFixed: function (el)
{
if ($(el).attr('id') == 'photo')
{
$(el).children().css
({
width: '450px'
});
}
}
});
});
</script>
</html>