https://avil13.github.io/jQuery-anchorSpy/

1<!DOCTYPE html>
2<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
3<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
4<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
5<!--[if gt IE 8]><!-->
6<html class="no-js">
7<!--<![endif]-->
8
9<head>
10    <meta charset="utf-8">
11    <meta http-equiv="X-UA-Compatible" content="IE=edge">
12    <title>jQuery plugin anchorSpy, active menu item on scroll - @AVIL13 Git Page</title>
13    <meta name="description" content="List of jQuery plugins and php classes from AVIL13">
14    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
15
16    <link rel="stylesheet" href="css/style.min.css">
17    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
18    <link rel="stylesheet" href="style.css">
19    

19<script src="js/vendor/modernizr-2.6.2.min.js"></script>

19
20    

20<script src="js/highlight.pack.js"></script>

20
21</head>
22
23<body>
24    <!--[if lt IE 7]>
25            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
26        <![endif]-->
27
28    <!-- !!! -->
29    <div class="container">
30
31        <header>
32            <h1 class="text"><a href="/">AVIL<sup>13</sup></a></h1>
33        </header>
34
35        <hr class="header">
36
37        <h2>Demo jQuery plugin to active menu item on scroll</h2>
38
39        <a href="https://github.com/avil13/jQuery-anchorSpy.js" target="_blank" class="git-link">GitHub repository</a>
40
41
42
43        <ul class="menu">
44            <li><a href="#how_to_use">How to use</a>
45            </li>
46            <li><a href="#recomendation">Recomendation</a>
47            </li>
48            <li><a href="#comment">Comments</a>
49            </li>
50        </ul>
51        <ul class="next-prev">
52            <li><a href="#" class="prev">prev</a>
53            </li>
54            <li><a href="#" class="next">next</a>
55            </li>
56        </ul>
57
58        <div class="empty"></div>
59
60
61        <hr>
62
63        <a name="how_to_use"></a>
64        <h3>How to use?</h3>
65        <p>
66            It's simple.
67            <br>Connect this plugin to your page:
68        </p>
69        <pre class="doc">
70            &lt;script src=&quot;/path/to/anchorSpy.js&quot;&gt;&lt;/script&gt;
71        </pre>
72
73        <p>
74            And initialize plugin giving a menu selector to it.
75        </p>
76
77        <pre class="doc pre">
78var Spy = $('<span class="cod">

78.menu</span>').anchorSpy({
79    margin: 50,
80    speed: 1000,
81    next: '.next',
82    prev: '.prev',
83    active_class: 'active',
84    active_parent: true
85}); </pre>
86
87    <p>
88        HTML documet looks like:
89    </p>
90    <pre class="doc pre">
91
92&lt;ul class=&quot;<span class="cod">menu</span>&quot;&gt;
93    &lt;li&gt;&lt;a href=&quot;<span class="var-el">#menu</span>&quot;&gt;menu&lt;/a&gt;&lt;/li&gt;
94    &lt;li&gt;&lt;a href=&quot;<span class="var-el">#faq</span>&quot;&gt;faq&lt;/a&gt;&lt;/li&gt;
95    &lt;li&gt;&lt;a href=&quot;<span class="var-el">#list</span>&quot;&gt;list&lt;/a&gt;&lt;/li&gt;
96&lt;/ul&gt;
97
98&lt;div&gt;
99    &lt;a name=&quot;<span class="var-el">menu</span>&quot;&gt;&lt;/a&gt;
100    Lorem ipsum dolor ...
101&lt;/div&gt;
102    </pre>
103
104        <p>
105            This plugin has some options.
106
107
108
109            <table class="options">
110                <tr class="hd">
111                    <th>option</th>
112                    <th align="right">default</th>
113                    <th align="right">needs</th>
114                </tr>
115                <tr>
116                    <td class="cod">margin</td>
117                    <td class="var-el" align="right">50</td>
118                    <td align="right">Integer</td>
119                </tr>
120                <tr>
121                    <td class="cod">speed</td>
122                    <td class="var-el" align="right">1000</td>
123                    <td align="right">Integer</td>
124                </tr>
125                <tr>
126                    <td class="cod">next</td>
127                    <td class="var-el" align="right">false</td>
128                    <td align="right">DOM selector</td>
129                </tr>
130                <tr>
131                    <td class="cod">prev</td>
132                    <td class="var-el" align="right">false</td>
133                    <td align="right">DOM selector</td>
134                </tr>
135                <tr>
136                    <td class="cod">active_class</td>
137                    <td class="var-el" align="right">'active'</td>
138                    <td align="right">string active class name</td>
139                </tr>
140                <tr>
141                    <td class="cod">active_parent</td>
142                    <td class="var-el" align="right">true</td>
143                    <td align="right">boolean, determines to which element active class has to be added</td>
144                </tr>
145            </table>
146
147        </p>
148
149        <br>
150        <p>
151            If You need reload menu use:
152        </p>
153        <pre class="doc">Spy.reload();</pre>
154        <br>
155
156        <p>
157            If you need to go to the next or previous block then use:
158        </p>
159        <pre class="doc">
160            Spy.next();
161            <br>
162            Spy.prev();
163        </pre>
164
165
166        <div class="empty"></div>
167
168
169    </div>
170
171    <a name="recomendation"></a>
172    <div class="footer container">
173        <div class="social-box">
174            <div class="social-btns">
175
176                <span class="social-text">
177                    <i class="fa fa-heart"></i> Recommendation
178                </span>
179
180                <a target="_blank" class="a-fb" href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Favil13.github.io"><i class="fa fa-facebook"></i> facebook</a>
181                <a target="_blank" class="a-tw" href="http://twitter.com/home?status=list+of+%23github+repositories+from+%40avil13+http%3A%2F%2Favil13.github.io%2F"><i class="fa fa-twitter"></i> twitter</a>
182                <a target="_blank" class="a-vk" href="http://vkontakte.ru/share.php?url=http%3A%2F%2Favil13.github.io"><i class="fa fa-vk"></i> vk.com</a>
183            </div>
184        </div>
185    </div>
186    <!-- @ -->
187
188    <div class="empty"></div>
189
190    <a name="comment"></a>
191
192       <div id="disqus_thread" class="container"></div>
193    

193<script type="text/javascript">
194        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
195        var disqus_shortname = 'avil13'; // required: replace example with your forum shortname
196        var disqus_title = true;
197
198        /* * * DON'T EDIT BELOW THIS LINE * * */
199        (function() {
200            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
201            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
202            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
203        })();
204    </script>

204
205    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
206
207
208    <div class="empty x3"></div>
209
210    <!-- @ -->
211    <div>
212
213        

213<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

213
214        

214<script>
215        window.jQuery || document.write('

215<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')
216        </script>

216
217        

217<script src="anchorSpy.js"></script>

217
218        

218<script src="script.js"></script>

218
219
220        

220<script src="js/all.js"></script>

220
221
222
223        

223<script>

223
224        (function(i, s, o, g, r, a, m) {
225            i['GoogleAnalyticsObject'] = r;
226            i[r] = i[r] || function() {
227                (i[r].q = i[r].q || []).push(arguments)
228            }, i[r].l = 1 * new Date();
229            a = s.createElement(o),
230            m = s.getElementsByTagName(o)[0];
231            a.async = 1;
232            a.src = g;
233            m.parentNode.insertBefore(a, m)
234        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
235
236        ga('create', '

236UA-49506315-1

236', 'avil13.github.io');
237        

237ga('require', 'displayfeatures');
238        ga('send', 'pageview');
239        </script>

239
240
241        

241<script type="text/javascript">
242        // Yandex
243        (function(d, w, c) {
244            (w[c] = w[c] || []).push(function() {
245                try {
246                    w.yaCounter24460400 = new Ya.Metrika({
247                        id: 24460400,
248                        webvisor: true,
249                        clickmap: true,
250                        trackLinks: true,
251                        accurateTrackBounce: true
252                    });
253                } catch (e) {}
254            });
255
256            var n = d.getElementsByTagName("script")[0],
257                s = d.createElement("script"),
258                f = function() {
259                    n.parentNode.insertBefore(s, n);
260                };
261            s.type = "text/javascript";
262            s.async = true;
263            s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js";
264
265            if (w.opera == "[object Opera]") {
266                d.addEventListener("DOMContentLoaded", f, false);
267            } else {
268                f();
269            }
270        })(document, window, "yandex_metrika_callbacks");
271        </script>

271
272        <noscript>
273            <div>
274                <img src="//mc.yandex.ru/watch/24460400" style="position:absolute; left:-9999px;" alt="" />
275            </div>
276        </noscript>
277
278
279
280    </div>
281</body>
282
283</html>