JAVASCRIPT   46

js.js

Guest on 21st May 2022 02:14:19 AM

  1. jQuery(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. });

Raw Paste


Login or Register to edit or fork this paste. It's free.