scrollspy1

scrollspy.js

if ($('.js-ptype-lst-nav-fixed').length) {
		var ptypeNavFloat = (function () {
			var ptypeNav = $('.js-ptype-lst-nav-fixed'),
				ptypeNavHolder = $('.ptype-lst-nav-h'),
				ptypeBlock = $('.ptype-grid-holder'),
				ptypeBtnMore = $('<li class="item -btn-more" />'),
				isPartPage = ptypeNav.hasClass('-js-parts'),
				ptypeNavHolderTop,
				indentHeightNav,
				indentBlock,
				countVisibleItem,
				hashId = location.hash.slice(1),
				calculate = function () {
					ptypeNav.removeClass('-fixed -fixed-mobile-open');
					ptypeNav.find('.item').css('left', '0'); //zero needs for css transition
					ptypeNav.find('.item.-btn-less').removeClass('-btn-less').addClass('-btn-more');
					ptypeNavHolderTop = parseInt(ptypeNavHolder.offset().top);
					indentHeightNav = CRD.device.media['desktop-large'] ? ptypeNavHolder.outerHeight() : 0;
					if (CRD.device.media['mobile-small'] || CRD.device.media['mobile-medium']) {
						countVisibleItem = CRD.device.media['mobile-small'] ? 4 : 6; //count of item which must be visible at navigation
						indentBlock = ptypeNavHolder.outerHeight();
					} else {
						indentBlock = parseInt(ptypeBlock.first().css('margin-top'));
					}
					// needs for show active link if it hidden when change media query at parts
					if (isPartPage) {
						ptypeNav.find('.active').trigger('click');
					}
				},
				smoothScroll = function (href, indentScroll) {
					var href = href || '';
					if ((href.indexOf('#') !== -1) && $(href).length) {
						$('body,html').animate({scrollTop: Math.ceil($(href).offset().top - indentScroll)}, 500);
					}
				},
				fixPositionNav = function (pageScroll) {
					if (pageScroll >= ptypeNavHolderTop + indentHeightNav) {
						if (!ptypeNav.hasClass('-fixed')) {
							ptypeNav.addClass('-fixed');
						}
					} else {
						ptypeNav.removeClass('-fixed');
					}
				},
				hideShowNav = function (pageScroll) {
					var floatNavPositionTop = 0,
                        ptypeBlockLast = ptypeBlock.last(),
                        ptypeBlockLastBottom = ptypeBlockLast.offset().top + ptypeBlockLast.outerHeight();
                    if(CRD.device.media['desktop-large'] && parseInt(ptypeNav.css('top'))) {
						floatNavPositionTop = parseInt(ptypeNav.css('top'));
					}
					if (pageScroll < ptypeBlockLastBottom - ptypeNav.outerHeight() - floatNavPositionTop) {
						ptypeNav.removeClass('-fixed-hide-nav');
					} else {
                    	if(!ptypeNav.hasClass('-fixed-hide-nav')) {
							ptypeNav.addClass('-fixed-hide-nav');
						}
					}
				},
				getWidthItemNav = function () {
					// item nav for  one row
					var itemWidth = ptypeNav.find('.item').get(0).getBoundingClientRect().width / ptypeNav.width() * 100;
					itemWidth = Math.round(itemWidth * 100) / 100;
					// item nav for  two row
					if (ptypeNav.hasClass('-fixed-mobile-open')) {
						itemWidth = itemWidth / 2;
					}
					return itemWidth;
				},
				moveItemNav = function (currentItemNum) {
					if (currentItemNum > countVisibleItem) {
						var itemWidth = getWidthItemNav();
						ptypeNav.find('.item').css('left', '-' + (currentItemNum - countVisibleItem) * itemWidth + '%');
					} else {
						ptypeNav.find('.item').css('left', '0'); //zero needs for css transition
					}
				},
				scrollSpyNav = function (_self, id, ids, currentItemNum, pageScroll) {
					var _self = $(_self),
                        targetOffsetTop = parseInt(_self.offset().top - indentBlock),
						targetOffsetBottom = parseInt(_self.offset().top + _self.height());

                    if (CRD.device.media['mobile-small'] || CRD.device.media['mobile-medium']) {
						targetOffsetBottom = targetOffsetBottom - indentBlock;
					}
					// if (pageScroll >= targetOffsetTop && pageScroll <= targetOffsetBottom) {
						$('.ptype-lst-nav').find('.link').removeClass('active');
						$('[href="#' + ids + '"]').addClass('active');
						if ((CRD.device.media['mobile-small'] || CRD.device.media['mobile-medium']) && !ptypeNav.hasClass('-fixed-mobile-open')) {
							moveItemNav(currentItemNum);
						}
						// change hashtag when scrolling. Don't use location.hash for old browsers.
						if(hashId !=ids && CRD.device.support.historyApi){
							history.replaceState(null, '', '#' + ids);
							hashId = ids;
						}
					// }
				};
				ptypeNav.append(ptypeBtnMore);

			return {
				init: function () {
					calculate();
					// toggle open nav at the mobile small
					ptypeNav.on('click', '.item', function (e) {
						// smooth animation
						var href = $(this).find('.link').attr('href'),
							indentScroll = indentBlock;
						// if open nav before fixed at mobile small
						if ($('.-fixed-mobile-open').not('.-fixed').length) {
							indentScroll = ptypeNavHolder.outerHeight();
						}
						smoothScroll(href, indentScroll);
						if (CRD.device.media['mobile-small'] || CRD.device.media['mobile-medium']) {
							// for parts
							var currentItemNum = $('.item').index(this) + 1;
							if (isPartPage && !$(this).is('.-btn-less, .-btn-more')) {
								moveItemNav(currentItemNum);
							}
							// for parts and accessories
							if ($(this).hasClass('-btn-more')) {
								ptypeBtnMore.removeClass('-btn-more').addClass('-btn-less');
								ptypeNav.addClass('-fixed-mobile-open');
							} else if (ptypeNav.hasClass('-fixed-mobile-open')) {
								ptypeNav.find('.-btn-less').removeClass('-btn-less').addClass('-btn-more');
								ptypeNav.removeClass('-fixed-mobile-open');
							}
							$(window).trigger('scroll');
						}
						e.preventDefault();
					});

					var topNav = ptypeNavHolderTop;


					$(window).on('scroll', function () {

						if (!isPartPage) {
							var arr = [];
							var pageScroll = $(window).scrollTop();
							if (CRD.device.media['mobile-small'] || CRD.device.media['mobile-medium'] || CRD.device.media['desktop-large']) {
								fixPositionNav(pageScroll);
								hideShowNav(pageScroll);
							}
							for (var index = ptypeBlock.length - 1; index >= 0; --index) {
                                var _self = ptypeBlock[index],
									id = _self.getAttribute('id'),
                                    currentItemNum = index + 1;

                                console.log(index);

								var _s = $(_self),
									targetOffsetTop = parseInt(_s.offset().top - 41);

                                if(pageScroll > targetOffsetTop) {
									arr.push(id);
									var ids = id;
									scrollSpyNav(_self, id, ids, currentItemNum, pageScroll);
								}


								if(ids){
									console.log('ids:' + ids);
									break;
								}
                            }
						}
						// console.log(arr);
					}).trigger('scroll');

					CRD.device.mediaChange(function () {
						calculate();
						$(window).trigger('scroll');
					});
				}
			};
		}());
		ptypeNavFloat.init();
	}