https://www.zelist.ro/insights/design/index/js/js.js

1jQuery(document).ready(function ($) {
2
3
4    //initialise Stellar.js
5    $(window).stellar();
6
7    //Cache some variables
8    var links = $('.navigation').find('li');
9    slide = $('.slide');
10    button = $('.button');
11    mywindow = $(window);
12    htmlbody = $('html,body');
13
14
15    //Setup waypoints plugin
16    slide.waypoint(function (event, direction) {
17
18        //cache the variable of the data-slide attribute associated with each slide
19        dataslide = $(this).attr('data-slide');
20
21        //If the user scrolls up change the navigation link that has the same data-slide attribute as the slide to active and 
22        //remove the active class from the previous navigation link 
23        if (direction === 'down') {
24            $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
25        }
26        // else If the user scrolls down change the navigation link that has the same data-slide attribute as the slide to active and 
27        //remove the active class from the next navigation link 
28        else {
29            $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
30        }
31
32    });
33
34    //waypoints doesnt detect the first slide when user scrolls back up to the top so we add this little bit of code, that removes the class 
35    //from navigation link slide 2 and adds it to navigation link slide 1. 
36    mywindow.scroll(function () {
37        if (mywindow.scrollTop() == 0) {
38            $('.navigation li[data-slide="1"]').addClass('active');
39            $('.navigation li[data-slide="2"]').removeClass('active');
40        }
41    });
42
43    //Create a function that will be passed a slide number and then will scroll to that slide using jquerys animate. The Jquery
44    //easing plugin is also used, so we passed in the easing method of 'easeInOutQuint' which is available throught the plugin.
45    function goToByScroll(dataslide) {
46        htmlbody.animate({
47            scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
48        }, 2000, 'easeInOutQuint');
49    }
50
51
52
53    //When the user clicks on the navigation links, get the data-slide attribute value of the link and pass that variable to the goToByScroll function
54    links.click(function (e) {
55        e.preventDefault();
56        dataslide = $(this).attr('data-slide');
57        goToByScroll(dataslide);
58    });
59
60    //When the user clicks on the button, get the get the data-slide attribute value of the button and pass that variable to the goToByScroll function
61    button.click(function (e) {
62        e.preventDefault();
63        dataslide = $(this).attr('data-slide');
64        goToByScroll(dataslide);
65
66    });
67
68
69});