├── LICENSE
├── Readme.md
├── examples
    ├── active.html
    ├── d3-scale-time.html
    ├── d3-scale.html
    └── tall-child.html
├── index.html
├── scroll-watcher.js
└── tests.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2016 Dow Jones & Company
 2 | 
 3 | Permission to use, copy, modify, and/or distribute this software for any
 4 | purpose with or without fee is hereby granted, provided that the above
 5 | copyright notice and this permission notice appear in all copies.
 6 | 
 7 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
 8 | WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
 9 | MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
10 | ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
11 | WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
12 | ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
13 | OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.


--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
  1 | # scrollWatcher 📜👀
  2 | 
  3 | A small JavaScript library for scroll-based data-driven graphics (without any nasty [scrolljacking](http://blog.arronhunt.com/post/66973746030/stop-scrolljacking)). scrollWatcher sticks an element at a fixed position onscreen, and then provides the distance scrolled through its (much taller) parent as a percentage.
  4 | 
  5 | - [Demo here](http://wsj.github.io/scroll-watcher/)
  6 | 
  7 | As seen on WSJ.com in [How Fed Rates Move Markets](http://graphics.wsj.com/reacting-to-fed-rates/) and [What ECB Stimulus Has Done](http://graphics.wsj.com/what-ecb-qe-stimulus-has-done/).
  8 | 
  9 | ## Is scrollWatcher the right library for you?
 10 | 
 11 | - Want something to always stick on the page? Use [CSS `position: fixed;`](https://css-tricks.com/almanac/properties/p/position/#article-header-id-2).
 12 | - Want something to stick when you scroll past it? Use [jQuery fixto plugin](https://github.com/bbarakaci/fixto) or [jQuery Sticky](https://github.com/garand/sticky).
 13 | - Want a sticky header that hides on scroll? Use [headroom.js](http://wicky.nillia.ms/headroom.js/).
 14 | - Want to trigger events on scroll? Use [Waypoints](http://imakewebthings.com/waypoints/).
 15 | - **If you want to use scroll as a way of interacting with a data-driven graphic without scrolljacking, use scrollWatcher.**
 16 | 
 17 | ## Quickstart
 18 | 
 19 | 1. Include [jQuery](http://jquery.com) and the sticky-positioning [fixto plugin](https://github.com/bbarakaci/fixto) on the page.
 20 | 
 21 | 2. In your HTML, you'll need a tall outer element, with one much shorter element inside of it.
 22 | 
 23 |     ```html
 24 |     <div class="outer" style="height: 2000px;">
 25 |         <div class="inner"></div>
 26 |     </div>
 27 |     ```
 28 | 
 29 | 3. In your JavaScript, you'll need to call `scrollWatcher` with a configuration object using `parent` and `onUpdate` arguments. The function passed into `onUpdate` will run every 20 miliseconds.
 30 | 
 31 |     ```js
 32 |     scrollWatcher({
 33 |         parent: '.outer',
 34 |         onUpdate: function( scrollPercent, parentElement ){
 35 |             $('.inner').text('Scrolled '+scrollPercent+'% through the parent.');
 36 |         }
 37 |     });
 38 |     ```
 39 | 
 40 | ## Examples
 41 | 
 42 | Check out the source code to see how these are used.
 43 | 
 44 | - [Basic demo](http://wsj.github.io/scroll-watcher/)
 45 | - [Using a D3 scale](http://wsj.github.io/scroll-watcher/examples/d3-scale.html)
 46 | - [Using a D3 time scale](http://wsj.github.io/scroll-watcher/examples/d3-scale-time.html)
 47 | - [Checking if the user has got there yet](http://wsj.github.io/scroll-watcher/examples/active.html)
 48 | 
 49 | ## Other features
 50 | 
 51 | ### Starting and stopping
 52 | 
 53 | If you create a new instance of scrollWatcher:
 54 | 
 55 | ```js
 56 | var myWatcher = scrollWatcher({
 57 |     onUpdate: function( scrollPercent, parentElement ){
 58 |         console.log('Scrolled '+scrollPercent+'% through the parent.');
 59 |     },
 60 |     parent: '.outer'
 61 | });
 62 | ```
 63 | 
 64 | ... you can then start, pause and stop at any time.
 65 | 
 66 | ```js
 67 | // stop checking but keep stuck
 68 | myWatcher.pause();
 69 | 
 70 | // stop checking and unstick
 71 | myWatcher.stop();
 72 | 
 73 | // start checking and restick
 74 | myWatcher.start();
 75 | ```
 76 | 
 77 | ### Check if active
 78 | 
 79 | There are two read-only properties:
 80 | 
 81 | - `active` is true when the scrollWatcher instance is currently onscreen (and running). 
 82 | 
 83 |     ```js
 84 |     var isActive = myWatcher.active;
 85 |     ```
 86 |         
 87 | - `hasBeenActive` is true when the scrollWatcher instance has been onscreen (and run) at least once.
 88 | 
 89 |     ```js
 90 |     var isOrWasActive = myWatcher.hasBeenActive;
 91 |     ```
 92 | 
 93 | You may want to use these to (for example) hide a "keep scrolling!" message.
 94 | 
 95 | ### Check for device support
 96 | 
 97 | Use `scrollWatcher.supported()` to check whether or not scrollWatcher will work in the current browser.
 98 | 
 99 | ## Browser support
100 | 
101 | scrollWatcher works on all modern browsers, including IE 9 and up. However, **it does not work on iOS 7 and lower** due to the way Safari handles CSS `position: fixed;`.
102 | 
103 | ## Testing
104 | 
105 | To run tests, open [`tests.html`](http://github.com/wsj/scroll-watcher/tests.html) in your browser and wait a couple of seconds.
106 | 
107 | ## Version history
108 | 
109 | **v1.0.0** (April 19, 2016)
110 | 
111 | - Initial public release
112 | 
113 | ## License
114 | 
115 | [ISC](/LICENSE)
116 | 


--------------------------------------------------------------------------------
/examples/active.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  3 | <style>
  4 | .outer, .outer2 {
  5 |     height: 2000px;
  6 |     position: relative;
  7 |     border: 1px solid skyblue;
  8 | }
  9 | .inner {
 10 |     font-size: 100px;
 11 |     width: 100%;
 12 |     border: 1px solid pink;
 13 | }
 14 | .meter {
 15 |     height: 20px;
 16 |     width: 0;
 17 |     background: blue;
 18 |     margin: 20px 0;
 19 | }
 20 | .stuck{
 21 |   position:fixed;
 22 |   top:0;
 23 | }
 24 | 
 25 | .scroll-status {
 26 |     position: fixed;
 27 |     top: 30%;
 28 |     right: 0;
 29 |     background: #eee;
 30 |     border: 1px solid black;
 31 |     padding: 10px;
 32 |     font-size: 30px;
 33 | }
 34 | 
 35 | .status2 {
 36 |     top: 40%;
 37 |     background-color: #D9B4B5;
 38 |     font-size: 20px;
 39 | }
 40 | 
 41 | .status3 {
 42 |     top: 45%;
 43 |     background-color: #D9B4B5;
 44 |     font-size: 20px;
 45 | }
 46 | 
 47 | .scroll-status.true {
 48 |     background-color: #CCE4D5;
 49 | }
 50 | 
 51 | 
 52 | .spacer {
 53 |     height: 800px;
 54 |     background: #f9f9f9;
 55 | }
 56 | 
 57 | </style>
 58 | 
 59 | <p>This is a demo page for <a href="http://github.com/wsj/scroll-watcher/">scrollWatcher</a>.</p>
 60 | 
 61 | <p>This shows how to use the active and hasBeenActive features of scrollWatcher.
 62 |     
 63 | <div class="spacer"></div>
 64 | 
 65 | <div class="outer">
 66 |     <div class="inner">
 67 |         <div class="text"></div>
 68 |         <div class="meter"></div>        
 69 |     </div>
 70 | </div>
 71 | 
 72 | <div class="scroll-status status1">
 73 |     Loading...
 74 | </div>
 75 | <div class="scroll-status status2">
 76 |     Loading...
 77 | </div>
 78 | <div class="scroll-status status3">
 79 |     Loading...
 80 | </div>
 81 | 
 82 | <script src="https://code.jquery.com/jquery-latest.min.js"></script>
 83 | <script src="https://cdnjs.cloudflare.com/ajax/libs/fixto/0.5.0/fixto.min.js"></script>
 84 | <script src="../scroll-watcher.js"></script>
 85 | 
 86 | <script type="text/javascript">
 87 | 
 88 | var onUpdate = function( scroll, $parent ){
 89 |     $parent.find('.text').text( scroll.toFixed(2) );
 90 |     $parent.find('.meter').width( scroll + '%' );
 91 |     
 92 |     // user-friendly message
 93 |     if ( myWatcher.hasBeenActive ) {
 94 |         $('.status1').text('Cool, you know what to do now.')
 95 |     } else {
 96 |         $('.status1').text('Hey user, try scrolling.')
 97 |     }
 98 |     
 99 |     // debug to show how the variables work
100 |     if ( myWatcher.hasBeenActive ) {
101 |         $('.status2').addClass('true').text('hasBeenActive is true')
102 |     } else {
103 |         $('.status2').removeClass('true').text('hasBeenActive is false')
104 |     }
105 |     if ( myWatcher.active ) {
106 |         $('.status3').addClass('true').text('active is true')
107 |     } else {
108 |         $('.status3').removeClass('true').text('active is false')
109 |     }
110 | }
111 | 
112 | var myWatcher = scrollWatcher({
113 |     onUpdate: onUpdate,
114 |     parent: '.outer'
115 | });
116 | 
117 | </script>


--------------------------------------------------------------------------------
/examples/d3-scale-time.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 3 | <style>
 4 | .outer, .outer2 {
 5 |     height: 2000px;
 6 |     position: relative;
 7 |     border: 1px solid skyblue;
 8 | }
 9 | .inner {
10 |     font-size: 100px;
11 |     width: 100%;
12 |     border: 1px solid pink;
13 | }
14 | .meter {
15 |     height: 20px;
16 |     width: 0;
17 |     background: blue;
18 |     margin: 20px 0;
19 | }
20 | .stuck{
21 |   position:fixed;
22 |   top:0;
23 | }
24 | 
25 | 
26 | </style>
27 | 
28 | <p>This is a demo page for <a href="http://github.com/wsj/scroll-watcher/">scrollWatcher</a>.</p>
29 | <p>In this example, we are using D3 to convert between the percentage-scrolled and a time scale.</p>
30 | <p>So instead of going from 0 to 100, it goes from Jan. 1 to Dec. 31.</p>
31 | 
32 | 
33 | <div class="outer">
34 |     <div class="inner">
35 |         <div class="text"></div>
36 |         <div class="meter"></div>        
37 |     </div>
38 | </div>
39 | 
40 | <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.11/d3.min.js"></script>
41 | <script src="https://code.jquery.com/jquery-latest.min.js"></script>
42 | <script src="https://cdnjs.cloudflare.com/ajax/libs/fixto/0.5.0/fixto.min.js"></script>
43 | <script src="../scroll-watcher.js"></script>
44 | 
45 | <script type="text/javascript">
46 | 
47 | // create a normal D3 time parser 
48 | var dateFormat = d3.time.format("%Y-%m-%d");
49 | 
50 | // create date objects for our start and end
51 | var dateRange = [
52 |     dateFormat.parse('2015-01-01'),
53 |     dateFormat.parse('2015-12-31')
54 | ];
55 | 
56 | // create D3 time scale using dateRange
57 | var scale = d3.time.scale()
58 |     .domain([0,100])
59 |     .range(dateRange);
60 | 
61 | var onUpdate = function( scroll, $parent ){
62 |     // map the percentage scrolled to our time scale
63 |     var scaled = scale(scroll);
64 |     // format it as a human-readable date
65 |     var formatted = dateFormat(new Date(scaled));
66 |     $parent.find('.text').text( formatted );
67 |     $parent.find('.meter').width( scroll + '%' );
68 | }
69 | 
70 | scrollWatcher({
71 |     onUpdate: onUpdate,
72 |     parent: '.outer'
73 | });
74 | 
75 | </script>


--------------------------------------------------------------------------------
/examples/d3-scale.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 3 | <style>
 4 | .outer, .outer2 {
 5 |     height: 2000px;
 6 |     position: relative;
 7 |     border: 1px solid skyblue;
 8 | }
 9 | .inner {
10 |     font-size: 100px;
11 |     width: 100%;
12 |     border: 1px solid pink;
13 | }
14 | .meter {
15 |     height: 20px;
16 |     width: 0;
17 |     background: blue;
18 |     margin: 20px 0;
19 | }
20 | .stuck{
21 |   position:fixed;
22 |   top:0;
23 | }
24 | 
25 | 
26 | </style>
27 | 
28 | <p>This is a demo page for <a href="http://github.com/wsj/scroll-watcher/">scrollWatcher</a>.</p>
29 | <p>In this example, we are using D3 to convert between the percentage-scrolled and another (arbitrary) scale.</p>
30 | <p>So instead of going from 0 to 100, it goes from -860 to 4200.</p>
31 | 
32 | 
33 | <div class="outer">
34 |     <div class="inner">
35 |         <div class="text"></div>
36 |         <div class="meter"></div>        
37 |     </div>
38 | </div>
39 | 
40 | <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.11/d3.min.js"></script>
41 | <script src="https://code.jquery.com/jquery-latest.min.js"></script>
42 | <script src="https://cdnjs.cloudflare.com/ajax/libs/fixto/0.5.0/fixto.min.js"></script>
43 | <script src="../scroll-watcher.js"></script>
44 | 
45 | <script type="text/javascript">
46 | 
47 | // create D3 scale, using rangeRound to ensure rounded numbers are produced
48 | var scale = d3.scale.linear()
49 |     .domain([0,100])
50 |     .rangeRound([-860,4200]);
51 | 
52 | var onUpdate = function( scroll, $parent ){
53 |     // map the percentage scrolled to our crazy scale
54 |     var scaled = scale(scroll);
55 |     $parent.find('.text').text( scaled );
56 |     $parent.find('.meter').width( scroll + '%' );
57 | }
58 | 
59 | scrollWatcher({
60 |     onUpdate: onUpdate,
61 |     parent: '.outer'
62 | });
63 | 
64 | </script>


--------------------------------------------------------------------------------
/examples/tall-child.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 3 | <style>
 4 | .outer, .outer2 {
 5 |     height: 2000px;
 6 |     position: relative;
 7 |     border: 1px solid skyblue;
 8 | }
 9 | .inner {
10 |     font-size: 100px;
11 |     width: 100%;
12 |     border: 1px solid pink;
13 | }
14 | .meter {
15 |     height: 20px;
16 |     width: 0;
17 |     background: blue;
18 |     margin: 20px 0;
19 | }
20 | .stuck{
21 |   position:fixed;
22 |   top:0;
23 | }
24 | 
25 | .tall-element {
26 |     /* pattern from here: http://lea.verou.me/css3patterns/#marrakesh */
27 |     background-color:white;
28 |     background-image:
29 |     radial-gradient(midnightblue 9px, transparent 10px),        
30 |     repeating-radial-gradient(midnightblue 0, midnightblue 4px, transparent 5px, transparent 20px, midnightblue 21px, midnightblue 25px, transparent 26px, transparent 50px);    
31 |     background-size: 30px 30px, 90px 90px; 
32 |     background-position: 0 0;
33 |     opacity: 0.5;
34 | }
35 | 
36 | </style>
37 | 
38 | <p>This is a demo page for <a href="http://github.com/wsj/scroll-watcher/">scrollWatcher</a>.</p>
39 | <p>In this example, the child element is taller than the screen height, but still sticks in the container. It's a rare case, but can occur (for example) on smartphones.</p>
40 | 
41 | <div class="outer">
42 |     <div class="inner">
43 |         <div class="text"></div>
44 |         <div class="meter"></div>
45 |         <div class="tall-element"></div>      
46 |     </div>
47 | </div>
48 | 
49 | <div class="outer2">
50 |     <div class="inner">
51 |         <div class="text"></div>
52 |         <div class="meter"></div>
53 |         <div class="tall-element"></div>      
54 |     </div>
55 | </div>
56 | 
57 | <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.11/d3.min.js"></script>
58 | <script src="https://code.jquery.com/jquery-latest.min.js"></script>
59 | <script src="https://cdnjs.cloudflare.com/ajax/libs/fixto/0.5.0/fixto.min.js"></script>
60 | <script src="../scroll-watcher.js"></script>
61 | 
62 | <script type="text/javascript">
63 | 
64 | var onUpdate = function( scroll, $parent ){
65 |     $parent.find('.meter').width( scroll + '%' );
66 | }
67 | 
68 | scrollWatcher({
69 |     onUpdate: onUpdate,
70 |     parent: '.outer'
71 | });
72 | 
73 | // set our tall element to be taller than the screen
74 | setInterval(function(){
75 |     $('.tall-element').css('height', $(window).height() + 100 );
76 | },100);
77 | 
78 | </script>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |     <head>
  4 |         <meta name="viewport" content="width=device-width, initial-scale=1">
  5 |         <meta charset="utf-8">
  6 | 
  7 |         <title>scrollWatcher</title>
  8 |         <meta name="title" content="scrollWatcher" />
  9 |         <meta property="og:title" content="scrollWatcher" />
 10 |         <meta name="twitter:title" content="scrollWatcher" />
 11 | 
 12 | 		<meta name="description" content="JS library for navigating data using scroll, from The Wall Street Journal.">
 13 |         <meta property="og:description" content="JS library for navigating data using scroll, from The Wall Street Journal." />
 14 | 		<meta name="twitter:description" content="JS library for navigating data using scroll, from The Wall Street Journal.">
 15 |     
 16 | 		<link rel="canonical" href="http://wsj.github.io/scroll-watcher/">
 17 | 		<meta property="og:url" content="http://wsj.github.io/scroll-watcher/">
 18 | 
 19 |         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 20 | 
 21 |         <style>
 22 |         /* Needed for scrollWatcher to work */
 23 |         .outer, .outer2 {
 24 |             height: 2000px;
 25 |             position: relative;
 26 |             border: 1px solid skyblue;
 27 |         }
 28 |         .inner {
 29 |             font-size: 100px;
 30 |             width: 100%;
 31 |             border: 1px solid pink;
 32 |         }
 33 |         .meter {
 34 |             height: 20px;
 35 |             width: 0;
 36 |             background: blue;
 37 |             margin: 20px 0;
 38 |         }
 39 |         .stuck{
 40 |           position:fixed;
 41 |           top:0;
 42 |         }
 43 |         
 44 |         /* Page styling */
 45 |         h2 {
 46 |             font-size: 20px;
 47 |         }
 48 |         .subhead {
 49 |             font-size: 130%;
 50 |             font-weight: 500;
 51 |             color: #777;
 52 |         }
 53 |         .main-body {
 54 |             background: rgb(240, 247, 247);
 55 |             padding: 24px 26px 22px 26px;
 56 |             max-width: 600px;
 57 |             font-size: 16px;
 58 |             margin: 30px auto;
 59 |         }
 60 |         footer {
 61 |             padding: 20px 0;
 62 |         }
 63 |         .github-link {
 64 |             margin-top: 10px;
 65 |         }
 66 | 
 67 |         </style>
 68 |     </head>
 69 |     <body>
 70 |         
 71 |         <div class="container">
 72 |         
 73 |             <header>
 74 |         
 75 |                 <h1>scrollWatcher</h1>
 76 |                 <p class="subhead">A JavaScript library for navigating data using scroll, by <em>The Wall Street Journal</em>.</p>
 77 |             </header>
 78 |         
 79 |             <div class="main-body">
 80 |                 
 81 |                 <p><a href="http://github.com/wsj/scroll-watcher/"><strong>scrollWatcher</strong></a> is a small library for scroll-based data-driven graphics (without any nasty <a href="http://blog.arronhunt.com/post/66973746030/stop-scrolljacking">scrolljacking</a>). It sticks an element at a fixed position onscreen, and then provides the distance scrolled through its (much taller) parent as a percentage.</p>
 82 | 
 83 |                 <p>As seen on WSJ.com in <a href="http://graphics.wsj.com/reacting-to-fed-rates/">How Fed Rates Move Markets</a> and <a href="http://graphics.wsj.com/what-ecb-qe-stimulus-has-done/">What ECB Stimulus Has Done</a>. Or scroll down for a live example.</p>
 84 |                                 
 85 |                 <a class="github-link btn btn-default" role="button" href="http://github.com/wsj/scroll-watcher/">View on GitHub</a>
 86 |                 
 87 |                 
 88 |             </div>
 89 | 
 90 |             <h2>Live demo - scroll to see how scrollWatcher works</h2>
 91 | 
 92 |             <div class="outer">
 93 |                 <div class="inner">
 94 |                     <div class="text"></div>
 95 |                     <div class="meter"></div>        
 96 |                 </div>
 97 |             </div>
 98 |             
 99 |             <footer>
100 |                 
101 |                 <p>All code released under the <a href="https://github.com/WSJ/scroll-watcher/blob/master/LICENSE">ISC license</a>. Pull requests welcomed.</p>
102 |                 <p>Developed at <em>The Wall Street Journal</em> by Elliot Bentley.</p>
103 |                 
104 |             </footer>
105 |             
106 |         </div><!-- .container -->
107 |     
108 | 
109 | 
110 |         <script src="https://code.jquery.com/jquery-latest.min.js"></script>
111 |         <script src="https://cdnjs.cloudflare.com/ajax/libs/fixto/0.5.0/fixto.min.js"></script>
112 |         <script src="scroll-watcher.js"></script>
113 |         
114 |         <script type="text/javascript">
115 |         
116 |         $(function(){
117 |             
118 |             var onUpdate = function( scroll, $parent ){
119 |                 $parent.find('.text').text( scroll.toFixed(2) );
120 |                 $parent.find('.meter').width( scroll + '%' );
121 |             }
122 |         
123 |             scrollWatcher({
124 |                 onUpdate: onUpdate,
125 |                 parent: '.outer'
126 |             });
127 |         
128 |         });
129 |         
130 |         
131 |         </script>
132 |         
133 |     </body>
134 | </html>


--------------------------------------------------------------------------------
/scroll-watcher.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | scrollWatcher v1.0.0
  3 | Developed by Elliot Bentley for The Wall Street Journal
  4 | Released under the ISC license
  5 | */
  6 | function scrollWatcher(opts){
  7 |     var isRunning = false;
  8 |     var $outer = $(opts.parent);
  9 |     var $inner = $(opts.parent).children().eq(0);
 10 |     var that = {
 11 |         active: false,
 12 |         hasBeenActive: false
 13 |     };
 14 | 
 15 |     // use jQuery fixTo plugin to make element sticky
 16 |     var outerId = Math.random().toString().replace('.','');
 17 |     
 18 |     if (typeof opts.onUpdate !== 'function') {
 19 |         throw('scrollWatcher needs an "onUpdate" callback.');
 20 |     }
 21 |     
 22 |     // this runs on each interval
 23 |     var maxedOut = false;
 24 |     var previousPos = 0;
 25 |     var onTick = function(){
 26 |         checkInnerHeight();
 27 |         var scrollDistance = getScrollDistance();
 28 |         var scrollPos = getScrollPos(scrollDistance);
 29 |         var cappedScrollPos = capPercentage(scrollPos);
 30 |         var scrollPosMaxOrMore = ( (scrollPos >= 100) || (scrollPos <= 0) );
 31 |         
 32 |         // 'maxedOut' is true when the scrollPos is outside of 0-100
 33 |         // and has run once at that maxed-out scroll position.
 34 |         // It improves performance by only running the callback when necessary
 35 |         if (scrollPos !== previousPos) {
 36 |             maxedOut = false;
 37 |         }
 38 |         if (!scrollPosMaxOrMore) {
 39 |             // 'active' property is for external API
 40 |             that.active = true;
 41 |             that.hasBeenActive = true;
 42 |             maxedOut = false;
 43 |         }
 44 |         if (!maxedOut) {
 45 |             // run callback function as specified by user
 46 |             opts.onUpdate( cappedScrollPos, $outer );
 47 |         }
 48 |         if (scrollPosMaxOrMore) {
 49 |             maxedOut = true;
 50 |             // 'active' property is for external API
 51 |             that.active = false;
 52 |         }
 53 |         previousPos = scrollPos;
 54 |     }    
 55 |     // gets scroll position as pixels from top of parent
 56 |     var getScrollDistance = function(){
 57 |         // cross-browser compatibility functionality from MDN
 58 |         // https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY
 59 |         var supportPageOffset = window.pageXOffset !== undefined;
 60 |         var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
 61 |         var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
 62 |         return y - $outer.offset().top;
 63 |     }
 64 |     // gets scroll position as % of container
 65 |     var getScrollPos = function(scrollDistance){
 66 |         var scrollPerc = ( scrollDistance / ( $outer.height() - $(window).height() ) ) * 100;
 67 |         return scrollPerc;
 68 |     }
 69 |     // toggles stickiness of 'inner' element
 70 |     var stickUnstick = function(scrollPos){
 71 |         if (scrollPos === 0){
 72 |             $inner.css('position','relative');
 73 |         } else if (scrollPos === 100) {
 74 |             $inner.css('position','absolute');
 75 |             $inner.css('bottom','0');
 76 |         } else {
 77 |             $inner.css('position','fixed');
 78 |         }
 79 |     }
 80 |     
 81 |     // prevent number from going under 0% or over 100%
 82 |     var capPercentage = function(scrollPerc){
 83 |         if (scrollPerc > 100) {
 84 |             scrollPerc = 100;
 85 |         } else if (scrollPerc < 0) {
 86 |             scrollPerc = 0;
 87 |         }
 88 |         return scrollPerc;
 89 |     }
 90 |     
 91 |     // check if child element is taller than window height
 92 |     var previousInnerHeight;
 93 |     var checkInnerHeight = function(){
 94 |         var newInnerHeight = $inner.height();
 95 |         if (newInnerHeight === previousInnerHeight) {
 96 |             return;
 97 |         }
 98 |         $inner.css( 'height', 'auto' );
 99 |         newInnerHeight = $inner.height();
100 |         var overflow = $(window).height() - newInnerHeight;
101 |         if (overflow >= 0) {
102 |             newInnerHeight = $(window).height() - (overflow+5);
103 |             $inner.css( 'height', newInnerHeight );
104 |             $inner.css( 'margin-bottom', overflow );
105 |         }
106 |         previousInnerHeight = newInnerHeight;
107 |     }
108 | 
109 |     // stop checking and unstick
110 |     that.stop = function(){
111 |         that.pause();
112 |         $outer.attr('id','');
113 |         $inner.fixTo('destroy');
114 |         return this;
115 |     };
116 |     // stop checking but keep stuck
117 |     that.pause = function(){
118 |         isRunning = false;
119 |         return this;
120 |     };
121 |     // starts watching for scroll movement
122 |     that.start = function(){
123 |         // sticky stuff
124 |         $outer.attr('id',outerId);
125 |         $inner.fixTo('#'+outerId);
126 |         var fn = function() {
127 |           if (isRunning === true) {
128 |             onTick();
129 |             window.requestAnimationFrame(fn);
130 |           }
131 |         }
132 |         isRunning = true;
133 |         window.requestAnimationFrame(fn);
134 |         return this;
135 |     }
136 |     // could be a useful alias
137 |     that.resume = that.start;
138 | 
139 |     // start watching immediately
140 |     that.start();
141 |         
142 |     return that;
143 | }
144 | 
145 | // does current device support scrollWatcher? returns true or false
146 | scrollWatcher.supported = function(){
147 |     
148 |     // feature sniff for old browsers
149 |     return ('indexOf' in []);
150 |             
151 |     // before iOS 8, CSS position fixed did not work
152 |     var iOS_matches = navigator.userAgent.match(/(iPad|iPhone|iPod touch);.*CPU.*OS (\d_\d)/i);
153 |     if (iOS_matches) {
154 |         var version = parseFloat(iOS_matches[iOS_matches.length-1].replace('_','.'));
155 |         if (version < 8) {
156 |             return false;
157 |         }
158 |     }
159 |     
160 |     return true;
161 | }


--------------------------------------------------------------------------------
/tests.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
  2 | <html>
  3 |     <head>
  4 |         <meta charset="utf-8">
  5 |         <title>
  6 |             Scrollwatcher tests
  7 |         </title>
  8 |         <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.20.0.css" type="text/css">
  9 |         
 10 |         <style>
 11 |         .stuck{
 12 |           position:fixed;
 13 |           top:0;
 14 |         }
 15 |         
 16 |         .outer, .outer2 {
 17 |             height: 5000px;
 18 |             position: relative;
 19 |             border: 1px solid skyblue;
 20 |         }
 21 |         .inner {
 22 |             font-size: 100px;
 23 |             width: 100%;
 24 |             border: 1px solid pink;
 25 |         }
 26 |         body {
 27 |             padding-bottom: 3000px;
 28 |         }
 29 |         </style>
 30 |     </head>
 31 |     <body>
 32 | 
 33 |         <div class="outer">
 34 |             <div class="inner">
 35 |                 <div class="text"></div>
 36 |                 <div class="meter"></div>        
 37 |             </div>
 38 |         </div>
 39 | 
 40 |         
 41 |         <div style="position: fixed; top: 0;">
 42 |             <p>This page contains QUnit tests for <a href="http://github.com/wsj/scroll-watcher/">scrollWatcher</a>.</p>
 43 | 
 44 |             <div id="qunit"></div>
 45 |             <div id="qunit-fixture"></div>
 46 |         </div>
 47 |         
 48 | 
 49 |         <script src="http://code.jquery.com/jquery-latest.min.js"></script>
 50 |         <script src="https://rawgit.com/bbarakaci/fixto/master/dist/fixto.js"></script>
 51 |         <script src="scroll-watcher.js"></script>
 52 |         
 53 |                 
 54 |         <script src="http://code.jquery.com/qunit/qunit-1.20.0.js" type="text/javascript">
 55 | </script>
 56 |         
 57 |         <script>
 58 | QUnit.test( "init without callback", function( assert ) {
 59 |     assert.throws(function(){
 60 |         scrollWatcher({
 61 |             parent: '.outer'
 62 |         });
 63 |     });
 64 | });        
 65 | 
 66 | QUnit.test( "init with callback", function( assert ) {
 67 |     var done = assert.async();
 68 |     var sw = scrollWatcher({
 69 |         parent: '.outer',
 70 |         onUpdate: function(){
 71 |             done();
 72 |             sw.stop();
 73 |         }
 74 |     });
 75 |     assert.notEqual( $('.outer').attr('id'), '' );
 76 | });        
 77 | 
 78 | QUnit.test( "stop", function( assert ) {
 79 |     var sw = scrollWatcher({
 80 |         parent: '.outer',
 81 |         onUpdate: function(){}
 82 |     });
 83 |     assert.notEqual( $('.outer').attr('id'), '' );
 84 |     sw.stop();
 85 |     assert.equal( $('.outer').attr('id'), '' );
 86 | });        
 87 | 
 88 | QUnit.test( "stop", function( assert ) {
 89 |     var done = assert.async();
 90 |     var sw = scrollWatcher({
 91 |         parent: '.outer',
 92 |         onUpdate: function(scroll,$parent){
 93 |             $parent.find('.text').text( scroll.toFixed(10) );
 94 |         }
 95 |     });
 96 |     window.scrollTo(0,5000);
 97 |     setTimeout(function(){
 98 |         assert.equal($('.text').text(), "100.0000000000", 'Is scrolled to 100%');
 99 |         sw.stop();
100 |         window.scrollTo(0,0);
101 |         done();
102 |     },100);
103 | });        
104 | 
105 | QUnit.test( "pause", function( assert ) {
106 |     var done = assert.async();
107 |     var sw = scrollWatcher({
108 |         parent: '.outer',
109 |         onUpdate: function(scroll,$parent){}
110 |     });
111 |     setTimeout(function(){
112 |         assert.notEqual( $('.outer').attr('id'), '' );
113 |         sw.pause();
114 |         setTimeout(function(){
115 |             assert.notEqual( $('.outer').attr('id'), '' );
116 |             sw.stop();
117 |             assert.equal( $('.outer').attr('id'), '' );
118 |             done();
119 |         },100);
120 |     },100);
121 | });        
122 | 
123 | 
124 | QUnit.test( "Run 100% once only", function( assert ) {
125 |     var done = assert.async();
126 |     assert.expect(1);
127 |     var sw = scrollWatcher({
128 |         parent: '.outer',
129 |         onUpdate: function(scroll,$parent){
130 |             $parent.find('.text').text( scroll.toFixed(5) );
131 |             assert.ok(true, 'onUpdate runs');
132 |         }
133 |     });
134 |     window.scrollTo(0,10000);
135 |     setTimeout(function(){
136 |         sw.stop();
137 |         window.scrollTo(0,0);
138 |         done();
139 |     },1000);
140 | });        
141 | 
142 | QUnit.test( "Run 0% once only", function( assert ) {
143 |     var done = assert.async();
144 |     assert.expect(2);
145 |     var sw = scrollWatcher({
146 |         parent: '.outer',
147 |         onUpdate: function(scroll,$parent){
148 |             $parent.find('.text').text( scroll.toFixed(5) );
149 |         }
150 |     });
151 |     window.scrollTo(0,10000);
152 |     setTimeout(function(){
153 |         assert.equal($('.text').text(), '100.00000', 'Callback on 100%');
154 |         window.scrollTo(0,0);
155 |         setTimeout(function(){
156 |             assert.equal($('.text').text(), '0.00000', 'Callback on 0%');
157 |             sw.stop();
158 |             done();
159 |         },100);
160 |     },100);
161 | });        
162 | 
163 | 
164 | QUnit.test( "Run 100% once after overshoot", function( assert ) {
165 |     var done = assert.async();
166 |     assert.expect(3);
167 |     
168 |     var loop = 0;
169 |     
170 |     window.scrollTo(0,0);
171 |     var sw = scrollWatcher({
172 |         parent: '.outer',
173 |         onUpdate: function(scroll,$parent){
174 |             if (loop === 0) {
175 |                 assert.equal(scroll, 0);
176 |                 window.scrollTo(0,200);
177 |             } else if (loop === 1) {
178 |                 assert.ok((scroll.toFixed(0) > 0) && (scroll.toFixed(0) < 100), 'Between 0 and 100');
179 |                 window.scrollTo(0,10000);                
180 |             } else if (loop >= 2) {
181 |                 assert.equal(scroll, 100);
182 |             }
183 |             loop++;
184 |         }
185 |     });
186 |     setTimeout(function(){
187 |         sw.stop();
188 |         window.scrollTo(0,0);
189 |         done();
190 |     },1000);
191 | });        
192 | 
193 | 
194 | QUnit.test( "Sticks with tall element", function( assert ) {
195 |     var done = assert.async();
196 |     var testDiv = '<div id="testDiv" style="height: '+ ($(window).height() *2)+'px;"></div>';
197 |     $('.inner').append( testDiv );
198 |     
199 |     window.scrollTo(0,200);
200 |     var loop = 0;
201 |     var sw = scrollWatcher({
202 |         parent: '.outer',
203 |         onUpdate: function( scroll ){
204 |             window.scrollTo(0,5000);
205 |             if (loop > 0) {
206 |                 assert.ok( scroll > 0, 'Scroll is greater than 0' );
207 |                 assert.ok( $('.inner').offset().top > 100, 'Inner is stuck');
208 |                 sw.stop();
209 |                 $('#testDiv').remove();
210 |                 window.scrollTo(0,0);
211 |                 done();
212 |             }
213 |             loop += 1;
214 |         }
215 |     });
216 | });        
217 | 
218 | 
219 | QUnit.test( "Active is correct", function( assert ) {
220 |     var done = assert.async();
221 |     assert.expect(3);
222 |     var sw = scrollWatcher({
223 |         parent: '.outer',
224 |         onUpdate: function(scroll,$parent){
225 |             // nada
226 |         }
227 |     });
228 |     assert.ok(!sw.active);
229 |     window.scrollTo(0,1000);
230 |     setTimeout(function(){
231 |         assert.ok(sw.active);
232 |         window.scrollTo(0,0);
233 |         setTimeout(function(){
234 |             assert.ok(!sw.active);
235 |             sw.stop();
236 |             done();
237 |         },100);
238 |     },100);
239 | });        
240 | 
241 | 
242 | QUnit.test( "hasBeenActive is correct", function( assert ) {
243 |     var done = assert.async();
244 |     assert.expect(3);
245 |     var sw = scrollWatcher({
246 |         parent: '.outer',
247 |         onUpdate: function(scroll,$parent){
248 |             // nada
249 |         }
250 |     });
251 |     assert.ok(!sw.hasBeenActive);
252 |     window.scrollTo(0,1000);
253 |     setTimeout(function(){
254 |         assert.ok(sw.hasBeenActive);
255 |         window.scrollTo(0,0);
256 |         setTimeout(function(){
257 |             assert.ok(sw.hasBeenActive);
258 |             sw.stop();
259 |             done();
260 |         },100);
261 |     },100);
262 | });        
263 | 
264 | 
265 | 
266 |         
267 |         </script>
268 |         
269 |     </body>
270 | </html>
271 | 


--------------------------------------------------------------------------------