SHARE
TWEET

main.js

a guest Nov 25th, 2013 8,867 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. jQuery(document).ready(function ($) {
  2.     //initialise Stellar.js
  3.     $(window).stellar();
  4.     //Cache some variables
  5.     var links = $('.navigation').find('li');
  6.     slide = $('.slide');
  7.     button = $('.button');
  8.     mywindow = $(window);
  9.     htmlbody = $('html,body');
  10.     //Setup waypoints plugin
  11.     slide.waypoint(function (event, direction) {
  12.         //cache the variable of the data-slide attribute associated with each slide
  13.         dataslide = $(this).attr('data-slide');
  14.         //If the user scrolls up change the navigation link that has the same data-slide attribute as the slide to active and
  15.         //remove the active class from the previous navigation link
  16.         if (direction === 'down') {
  17.             $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
  18.         }
  19.         // else If the user scrolls down change the navigation link that has the same data-slide attribute as the slide to active and
  20.         //remove the active class from the next navigation link
  21.         else {
  22.             $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
  23.         }
  24.     });
  25.     //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
  26.     //from navigation link slide 2 and adds it to navigation link slide 1.
  27.     mywindow.scroll(function () {
  28.         if (mywindow.scrollTop() == 0) {
  29.             $('.navigation li[data-slide="1"]').addClass('active');
  30.             $('.navigation li[data-slide="2"]').removeClass('active');
  31.         }
  32.     });
  33.     //Create a function that will be passed a slide number and then will scroll to that slide using jquerys animate. The Jquery
  34.     //easing plugin is also used, so we passed in the easing method of 'easeInOutQuint' which is available throught the plugin.
  35.     function goToByScroll(dataslide) {
  36.         htmlbody.animate({
  37.             scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
  38.         }, 2000, 'easeInOutQuint');
  39.     }
  40.     //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
  41.     links.click(function (e) {
  42.         e.preventDefault();
  43.         dataslide = $(this).attr('data-slide');
  44.         goToByScroll(dataslide);
  45.     });
  46.     //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
  47.     button.click(function (e) {
  48.         e.preventDefault();
  49.         dataslide = $(this).attr('data-slide');
  50.         goToByScroll(dataslide);
  51.     });
  52. });
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top