https://c3ntinel.com/js/jquery.smint.js

1
2
3	(function(){
4
5
6	$.fn.smint = function( options ) {
7
8		// adding a class to users div
9		jQuery(this).addClass('smint')
10
11		var settings = jQuery.extend({
12		            'scrollSpeed '  : 500
13		}, options);
14
15		//Set the variables needed
16		var optionLocs = new Array();
17		var lastScrollTop = 0;
18		var menuHeight = jQuery("").height();
19
20		return jQuery('.smint a').each( function(index) {
21            if($(this).hasClass("extLink")) {
22				return;
23			}
24			
25			if ( settings.scrollSpeed ) {
26				var scrollSpeed = settings.scrollSpeed
27			}
28
29			//Fill the menu
30			var id = jQuery(this).attr("id");
31			optionLocs.push(Array(jQuery("div."+id).position().top-menuHeight, jQuery("div."+id).height()+jQuery("div."+id).position().top, id));
32			
33			///////////////////////////////////
34
35			// get initial top offset for the menu 
36			var stickyTop = jQuery('.smint').offset().top;	
37
38			// check position and make sticky if needed
39			var stickyMenu = function(direction){
40
41				// current distance top
42				var scrollTop = jQuery(window).scrollTop(); 
43
44				// if we scroll more than the navigation, change its position to fixed and add class 'fxd', otherwise change it back to absolute and remove the class
45				if (scrollTop > stickyTop) { 
46					jQuery('.smint').css({ 'position': 'fixed', 'top':0 }).addClass('fxd');	
47				} else {
48					jQuery('.smint').css({ 'position': 'absolute', 'top':stickyTop }).removeClass('fxd'); 
49				}   
50
51				//Check if the position is inside then change the menu
52				// Courtesy of Ryan Clarke (@clarkieryan)
53
54
55				if(optionLocs[index][0] <= scrollTop && scrollTop <= optionLocs[index][1]){	
56					if(direction == "up"){
57						jQuery("#"+id).addClass("active");
58						jQuery("#"+optionLocs[index+1][2]).removeClass("active");
59					} else if(index > 0) {
60						jQuery("#"+id).addClass("active");
61						jQuery("#"+optionLocs[index-1][2]).removeClass("active");
62					} else if(direction == undefined){
63						jQuery("#"+id).addClass("active");
64					}
65					jQuery.each(optionLocs, function(i){
66						if(id != optionLocs[i][2]){
67							jQuery("#"+optionLocs[i][2]).removeClass("active");
68						}
69					});
70				}
71			};
72
73			// run functions
74			stickyMenu();
75
76			// run function every time you scroll
77			jQuery(window).scroll(function() {
78				//Get the direction of scroll
79				var st = jQuery(this).scrollTop();
80				if (st > lastScrollTop) {
81				    direction = "down";
82				} else if (st < lastScrollTop ){
83				    direction = "up";
84				}
85				lastScrollTop = st;
86				stickyMenu(direction);
87
88				// Check if at bottom of page, if so, add class to last <a> as sometimes the last div
89				// isnt long enough to scroll to the top of the page and trigger the active state.
90
91				if(jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height()) {
92       			jQuery('.smint a').removeClass('active')
93       			jQuery('.smint a').last().addClass('active')
94   }
95			});
96
97			///////////////////////////////////////
98    
99        
100        	jQuery(this).on('click', function(e){
101				// gets the height of the users div. This is used for off-setting the scroll so the menu doesnt overlap any content in the div they jst scrolled to
102				var selectorHeight = jQuery('.smint').height();   
103
104        		// stops empty hrefs making the page jump when clicked
105				e.preventDefault();
106
107				// get id pf the button you just clicked
108		 		var id = jQuery(this).attr('id');
109
110		 		// if the link has the smint-disable class it will be ignored 
111		 		// Courtesy of mcpacosy ‏(@mcpacosy)
112
113                if (jQuery(this).hasClass("smint-disable"))
114                {
115                    return false;
116                }
117
118				// gets the distance from top of the div class that matches your button id minus the height of the nav menu. This means the nav wont initially overlap the content.
119				var goTo =  jQuery('div.'+ id).offset().top -selectorHeight;
120
121				// Scroll the page to the desired position!
122				jQuery("html, body").animate({ scrollTop: goTo }, scrollSpeed);
123
124			});	
125		});
126	}
127
128
129})(jQuery);