redbranchmedia

Highlight Targeted Items with Scroll Limit

Oct 1st, 2015
207
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.    // limit scroll call for performance
  2.    var scrollHandling = {
  3.     allow: true,
  4.     reallow: function() {
  5.       scrollHandling.allow = true;
  6.     },
  7.     delay: 500 //(milliseconds) adjust to the highest acceptable value
  8.   };
  9.  
  10. // filter function for finding data-scrollto element matching class
  11. $.fn.filterByData = function (name, value) {
  12.   return this.filter(function () {
  13.     return $(this).data(name) === value;
  14.   });
  15. };
  16.  
  17. if ($('.side_nav_wrapper').length > 0) { // check for side_nav_wrapper
  18.   $(window).on('scroll', function () {
  19.        if(scrollHandling.allow) { // call scroll limit
  20.       var halfWay = $(window).height() / 2; // get half height of window
  21.       $('.sectionAnchor').each(function () { // check each section anchor
  22.           var distance = $(this).offset().top - halfWay; // check when halfway from top
  23.           if ($(window).scrollTop() >= distance) {
  24.             $('.pageScroller').removeClass('active');
  25.             var classString = $(this).attr('class');
  26.             if (classString) {
  27.                   //Get first class from class string
  28.                   var target = classString.split(' ')[0];
  29.                   //Find anchors and filter by data-scrollto == our class name
  30.                   var navItem = $('.pageScroller').filterByData('scrollto', target);
  31.  
  32.                   navItem.addClass('active');
  33.                 }
  34.               }
  35.             });
  36.         } // end scorll handling limit
  37.   }); // end window scroll
  38. } // end check for side_nav_wrapper
Advertisement
Add Comment
Please, Sign In to add comment