scrollToggle/index.html at master · shorttompkins/scrollToggle · GitHub

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
<!DOCTYPE html>
<html>
    <head>
        <title>ScrollToggle Example Page</title>
        <link href="bootstrap.css" media="screen" rel="stylesheet">
    </head>
    <body>
        <div class="row" style="width: 1000px; margin: 0 auto;">
            <div class="span12">
                <p>This is a sample page.  There are a few block elements below that will console.log() as you reach them by scrolling down.  They will also console.log() when you scroll back up and they are gone again.</p>
                <br /><br />
                <p>Scroll down...</p>
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                <pre id="block1">
                    Here is some random block of content...(keep scrolling)
                </pre>
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                <pre id="block2">
                    Here is some random block of content...(keep scrolling)
                </pre>
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                <pre id="block3">
                    All done.
                </pre>
            </div>
        </div>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
        <script src="scrollToggle.js" type="text/javascript"></script>
        <script type="text/javascript">
            var height = $(window).height();
            $(function () {
                //ScrollToggle(verticalScrollTriggerPosition, callbackScrolledTO, callbackScrolledAWAY)
                //note that we subtract the height of the window from the elements TOP so that we are alerted when the element scrolls passed the BOTTOM of the window.
                //Sample 2 is set (as default behavior) to alert when the element is scrolled past the top of the screen.

                var scroller1 = new ScrollToggle($('#block1').position().top - height, function () {
                    console.log("Element #1 has been reached.");
                }, function () {
                    console.log("Element #1 is gone.");
                });

                var scroller2 = new ScrollToggle($('#block2').position().top, function () {
                    console.log("Element #2 just hit the top of the screen.");
                }, function () {
                    console.log("Element #2 was just scrolled past.");
                });

                var scroller3 = new ScrollToggle($('#block3').position().top - height, function () {
                    console.log("Element #3 has been reached.");
                }, function () {
                    console.log("Element #3 is gone.");
                });
            });
        </script>
    </body>
</html>