https://www.elpotrorestaurant.com/js/jquery.smint.js

1
2
3
4
5
6
7/*
8
9SMINT V1.0 by Robert McCracken
10SMINT V2.0 by robert McCracken with some awesome help from Ryan Clarke (@clarkieryan)
11
12SMINT is my first dabble into jQuery plugins!
13
14http://www.outyear.co.uk/smint/
15
16If you like Smint, or have suggestions on how it could be improved, send me a tweet @rabmyself
17
18*/
19
20
21	(function(){
22
23
24	$.fn.smint = function( options ) {
25
26		// adding a class to users div
27		$(this).addClass('smint')
28
29		var settings = $.extend({
30		            'scrollSpeed '  : 500
31		}, options);
32
33		//Set the variables needed
34		var optionLocs = new Array();
35		var lastScrollTop = 0;
36		var menuHeight = $(".smint").height();
37
38		return $('.smint a').each( function(index) {
39            
40			if ( settings.scrollSpeed ) {
41				var scrollSpeed = settings.scrollSpeed
42			}
43
44			//Fill the menu
45			var id = $(this).attr("id");
46			optionLocs.push(Array($("div."+id).position().top-menuHeight, $("div."+id).height()+$("div."+id).position().top, id));
47
48			///////////////////////////////////
49
50			// get initial top offset for the menu 
51			var stickyTop = $('.smint').offset().top;	
52
53			// check position and make sticky if needed
54			var stickyMenu = function(direction){
55
56				// current distance top
57				var scrollTop = $(window).scrollTop(); 
58
59				// 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
60				if (scrollTop > stickyTop) { 
61					$('.smint').css({ 'position': 'fixed', 'top':0 }).addClass('fxd');	
62				} else {
63					$('.smint').css({ 'position': '', 'top':stickyTop }).removeClass('fxd'); 
64				}   
65
66				//Check if the position is inside then change the menu
67				// Courtesy of Ryan Clarke (@clarkieryan)
68
69
70				if(optionLocs[index][0] <= scrollTop && scrollTop <= optionLocs[index][1]){	
71					if(direction == "up"){
72						$("#"+id).addClass("active");
73						$("#"+optionLocs[index+1][2]).removeClass("active");
74					} else if(index > 0) {
75						$("#"+id).addClass("active");
76						$("#"+optionLocs[index-1][2]).removeClass("active");
77					} else if(direction == undefined){
78						$("#"+id).addClass("active");
79					}
80					$.each(optionLocs, function(i){
81						if(id != optionLocs[i][2]){
82							console.log(i);
83							$("#"+optionLocs[i][2]).removeClass("active");
84						}
85					});
86				}
87			};
88
89			// run functions
90			stickyMenu();
91
92			// run function every time you scroll
93			$(window).scroll(function() {
94				//Get the direction of scroll
95				var st = $(this).scrollTop();
96				if (st > lastScrollTop) {
97				    direction = "down";
98				} else if (st < lastScrollTop ){
99				    direction = "up";
100				}
101				lastScrollTop = st;
102				stickyMenu(direction);
103
104				// Check if at bottom of page, if so, add class to last <a> as sometimes the last div
105				// isnt long enough to scroll to the top of the page and trigger the active state.
106
107				if($(window).scrollTop() + $(window).height() == $(document).height()) {
108       			$('.smint a').removeClass('active')
109       			$('.smint a').last().addClass('active')
110   }
111			});
112
113			///////////////////////////////////////
114    
115        
116        	$(this).on('click', function(e){
117				// 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
118				var selectorHeight = $('.smint').height();   
119
120        		// stops empty hrefs making the page jump when clicked
121				e.preventDefault();
122
123				// get id pf the button you just clicked
124		 		var id = $(this).attr('id');
125
126                if ($(this).hasClass("smint-disable"))
127                {
128                    return false;
129                }
130
131				// 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.
132				var goTo =  $('div.'+ id).offset().top -selectorHeight;
133
134				// Scroll the page to the desired position!
135				$("html, body").animate({ scrollTop: goTo }, scrollSpeed);
136
137			});	
138		});
139	}
140
141
142})();