Skip to content

Commit fe9cb5d

Browse files
d4nylld4nyll
committed
Merge pull request d4nyll#18 from d4nyll/dev
Merged from dev
2 parents ba93da7 + ea24834 commit fe9cb5d

File tree

15 files changed

+442
-178
lines changed

15 files changed

+442
-178
lines changed

‎README.md‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# smartscroll
22

3-
smartscroll is a tiny (1164b minfied + gzipped) jQuery plugin that has these *independent* features:
3+
smartscroll is a tiny (1378b minfied + gzipped) jQuery plugin that has these *independent* features:
44

55
1. Section scrolling - Scrolljacking
66
2. Auto-hash - Updates the URL hash based on current position on page
@@ -32,19 +32,22 @@ Structure your HTML like so (default options included)
3232
<div class="section" data-hash="section-hash-name"></div>
3333
</div>
3434
<script src="path/to/lethargy.min.js">
35+
<script src="https://rawgit.com/Olical/EventEmitter/master/EventEmitter.min.js"></script>
3536
<script src="path/to/smartscroll.min.js">
3637
<script>
3738
var options = {
3839
mode: "vp", // "vp", "set"
39-
autoHash: true,
40+
autoHash: false,
4041
sectionScroll: true,
4142
initialScroll: true,
4243
keepHistory: false,
4344
sectionWrapperSelector: ".section-wrapper",
4445
sectionClass: "section",
4546
animationSpeed: 300,
4647
headerHash: "header",
47-
breakpoint: null
48+
breakpoint: null,
49+
eventEmitter: null,
50+
dynamicHeight: false
4851
};
4952
$.smartscroll(options);
5053
</script>
@@ -59,7 +62,7 @@ Structure your HTML like so (default options included)
5962
* `mode` - (String) Valid options are:
6063
* `vp` (Viewport) - The sections will be automatically sized to be the same as the viewport
6164
* `set` - Use the height and width set by CSS (use this for having different heights for different sections)
62-
* `autoHash` - (Boolean) Whether the auto-hashing feature is enabled
65+
* `autoHash` - (Boolean) Whether the auto-hashing feature is enabled. If you use this feature, it is important to use EventEmitter as well, otherwise smartscroll will listen to every `scroll` event, which is very resource-draining and can make the animation more 'glitchy'
6366
* `sectionScroll` - (Boolean) Whether the section-scrolling feature is enabled
6467
* `initialScroll` - (Boolean) Whether smartscroll should scroll to the position specified by the hash on initial load
6568
* `keepHistory` - (Boolean) Whether scrolling through different sections will be recorded in the browser's history
@@ -68,6 +71,9 @@ Structure your HTML like so (default options included)
6871
* `animationSpeed` - (Integer) Time taken for the scroll animation, in miliseconds
6972
* `headerHash` - (String) The hash for the section above the sections, must be non-empty to reliably ensure the page do not jump when updating the hash value across browsers (as `#` means `_top`)
7073
* `breakpoint` - (Integer) The width of the browser below which scrolljacking will be disabled
74+
* `sectionSelector` - (String) The selector applied to each section, overrides `sectionClass` and allow more flexibility in choosing a selector. (Added in 2.1.0)
75+
* `dynamicHeight` - (Boolean) If you are going to be dynamically adding and removing content so as to change the position and/or size of the section wrappers and/or sections, then set this to true. Set to false otherwise to increase performance.
76+
7177

7278
### Architecture
7379

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"smartscroll.js",
55
"sass/smartscroll.scss"
66
],
7-
"version": "2.0.1",
7+
"version": "2.1.0",
88
"homepage": "https://github.com/d4nyll/smartscroll",
99
"repository": {
1010
"type": "git",

‎css/example.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
/* line 1, ../sass/example.scss */
2-
.header, .section {
2+
.header, .footer, .section {
33
display: table;
44
width: 100%;
55
text-align: center;
66
padding: 15%;
77
box-sizing: border-box;
88
}
99
/* line 7, ../sass/example.scss */
10-
.header > div, .section > div {
10+
.header > div, .footer > div, .section > div {
1111
display: table-cell;
1212
vertical-align: middle;
1313
}
@@ -35,7 +35,7 @@ li {
3535
}
3636

3737
/* line 31, ../sass/example.scss */
38-
.header {
38+
.header, .footer {
3939
height: 700px;
4040
}
4141

‎examples/auto-hash/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<div class="section" data-hash="a">
1313
<div>
1414
<h1>smartscroll - Auto-Hash</h1>
15-
<p>A tiny (1164b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
15+
<p>A tiny (1378b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
1616
<p>See it on <a href="https://github.com/d4nyll/smartscroll" target="_blank">GitHub</a>, or see some <a href="http://blog.danyll.com/smartscroll-jquery-scrolljacking-plugin/" target="_blank">comparisons</a></p>
1717
<p>Try out other examples!</p>
1818
<ul>

‎examples/different-heights-hybrid-scroll/index.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta name=viewport content="width=device-width, initial-scale=1">
5+
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
6+
<link rel="stylesheet" href="../../css/smartscroll.css">
7+
<link rel="stylesheet" href="../../css/example.css">
8+
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
9+
</head>
10+
<body>
11+
<div class="header">
12+
<div>
13+
<h1>smartscroll - Different Heights &amp; Hybrid Scroll</h1>
14+
<p>A tiny (1378b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
15+
<p>See it on <a href="https://github.com/d4nyll/smartscroll" target="_blank">GitHub</a>, or see some <a href="http://blog.danyll.com/smartscroll-jquery-scrolljacking-plugin/" target="_blank">comparisons</a></p>
16+
<p>Try out other examples!</p>
17+
<ul>
18+
<li><a href="http://d4nyll.github.io/smartscroll/">Standard</a></li>
19+
<li><a href="http://d4nyll.github.io/smartscroll/permalink/#c">Permalink</a></li>
20+
<li><a href="http://d4nyll.github.io/smartscroll/different-heights/">Different Heights</a></li>
21+
<li><a href="http://d4nyll.github.io/smartscroll/hybrid-scroll/">Hybrid Scroll</a></li>
22+
<li><a href="http://d4nyll.github.io/smartscroll/auto-hash/">Auto-Hash</a></li>
23+
<li><a href="http://d4nyll.github.io/smartscroll/keep-history/">Keep History</a></li>
24+
<li><a href="http://d4nyll.github.io/smartscroll/responsive/">Responsive</a></li>
25+
</ul>
26+
</div>
27+
</div>
28+
<div class="header">
29+
<div>
30+
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
31+
</div>
32+
</div>
33+
<div class="section-wrapper">
34+
<div class="section" data-hash="a">
35+
<div>
36+
<p>Normally, your sections will have to be 100% of the viewport for it to work.</p>
37+
</div>
38+
</div>
39+
<div class="section" data-hash="b">
40+
<div>
41+
<p>With smartscroll, the section can all be of different heights!</p>
42+
</div>
43+
</div>
44+
<div class="section" data-hash="c">
45+
<div>
46+
<p>Just include the option <code>mode: "set"</code>.</p>
47+
</div>
48+
</div>
49+
<div class="section" data-hash="d">
50+
<div>
51+
<p>Just include the option <code>mode: "set"</code>.</p>
52+
</div>
53+
</div>
54+
</div>
55+
<div class="footer">
56+
<div>
57+
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
58+
</div>
59+
</div>
60+
<div class="footer">
61+
<div>
62+
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
63+
</div>
64+
</div>
65+
<script src="https://rawgit.com/Olical/EventEmitter/master/EventEmitter.min.js"></script>
66+
<script type="text/javascript" src="../../bower_components/lethargy/lethargy.min.js"></script>
67+
<script type="text/javascript" src="../../smartscroll.js"></script>
68+
<script>
69+
var ee = new EventEmitter();
70+
$.smartscroll({
71+
mode: "set",
72+
eventEmitter: ee
73+
});
74+
</script>
75+
</body>
76+
</html>

‎examples/different-heights/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<div class="section" data-hash="a">
1313
<div>
1414
<h1>smartscroll - Different Heights</h1>
15-
<p>A tiny (1164b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
15+
<p>A tiny (1378b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
1616
<p>See it on <a href="https://github.com/d4nyll/smartscroll" target="_blank">GitHub</a>, or see some <a href="http://blog.danyll.com/smartscroll-jquery-scrolljacking-plugin/" target="_blank">comparisons</a></p>
1717
<p>Try out other examples!</p>
1818
<ul>

‎examples/hybrid-scroll/index.html‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<div class="header">
1212
<div>
1313
<h1>smartscroll - Hybrid Scroll</h1>
14-
<p>A tiny (1164b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
14+
<p>A tiny (1378b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
1515
<p>See it on <a href="https://github.com/d4nyll/smartscroll" target="_blank">GitHub</a>, or see some <a href="http://blog.danyll.com/smartscroll-jquery-scrolljacking-plugin/" target="_blank">comparisons</a></p>
1616
<p>Try out other examples!</p>
1717
<ul>
@@ -50,8 +50,7 @@ <h1>Hybrid Scroll</h1>
5050
</div>
5151
</div>
5252
</div>
53-
54-
<div class="header">
53+
<div class="footer">
5554
<div>
5655
<h1>Footer</h1>
5756
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
@@ -110,7 +109,6 @@ <h1>Footer</h1>
110109
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
111110
</div>
112111
</div>
113-
114112
<script type="text/javascript" src="../../bower_components/lethargy/lethargy.min.js"></script>
115113
<script type="text/javascript" src="../../smartscroll.js"></script>
116114
<script>

‎examples/index.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<div class="header">
1212
<div>
1313
<h1>smartscroll</h1>
14-
<p>A tiny (1164b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
14+
<p>A tiny (1378b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
1515
<p>See it on <a href="https://github.com/d4nyll/smartscroll" target="_blank">GitHub</a>, or see some <a href="http://blog.danyll.com/smartscroll-jquery-scrolljacking-plugin/" target="_blank">comparisons</a></p>
1616
<p>Try out other examples!</p>
1717
<ul>
@@ -80,13 +80,16 @@ <h1>Responsive</h1>
8080
</div>
8181
</div>
8282
</div>
83+
<script src="https://rawgit.com/Olical/EventEmitter/master/EventEmitter.min.js"></script>
8384
<script type="text/javascript" src="../bower_components/lethargy/lethargy.min.js"></script>
8485
<script type="text/javascript" src="../smartscroll.js"></script>
8586
<script>
87+
var ee = new EventEmitter();
8688
$.smartscroll({
8789
sectionWrapperSelector: ".section-wrapper",
8890
sectionClass: "section",
89-
headerHash: "welcome"
91+
headerHash: "welcome",
92+
eventEmitter: ee
9093
});
9194
</script>
9295
</body>

‎examples/keep-history/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<div class="section" data-hash="a">
1313
<div>
1414
<h1>smartscroll - Keep History</h1>
15-
<p>A tiny (1164b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
15+
<p>A tiny (1378b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
1616
<p>See it on <a href="https://github.com/d4nyll/smartscroll" target="_blank">GitHub</a>, or see some <a href="http://blog.danyll.com/smartscroll-jquery-scrolljacking-plugin/" target="_blank">comparisons</a></p>
1717
<p>Try out other examples!</p>
1818
<ul>

‎examples/permalink/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<div class="section" data-hash="a">
1313
<div>
1414
<h1>smartscroll - Permalink</h1>
15-
<p>A tiny (1164b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
15+
<p>A tiny (1378b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
1616
<p>See it on <a href="https://github.com/d4nyll/smartscroll" target="_blank">GitHub</a>, or see some <a href="http://blog.danyll.com/smartscroll-jquery-scrolljacking-plugin/" target="_blank">comparisons</a></p>
1717
<p>Try out other examples!</p>
1818
<ul>

0 commit comments

Comments
 (0)