Support inactive items for invisible elements

src/pageitems.js

@@ -45,7 +45,7 @@ mod.directive('pageitems', function(ScrollSpy) {
 				}
 
 				var pos = spyElem.getBoundingClientRect().top;
-				if (pos <= topmargin) {
+				if (Math.floor(pos) <= topmargin && angular.element(spyElem).is(':visible')) {
 					// the window has been scrolled past the top of a spy element
 					spy.pos = pos;
 
@@ -81,4 +81,4 @@ mod.directive('pageitems', function(ScrollSpy) {
 		},
 		link: linkfn
 	};
-});
+});

src/pagemenu.js

@@ -55,7 +55,10 @@ mod.directive('pagemenu', function($compile, $location, $anchorScroll) {
 			lastitem= item.link;
 			return item;
 		};
-
+		// check if element is visible
+		scope.isVisible = function(id) {
+			return angular.element('#' + id).is(':visible');
+		}
 		// dom items to build menu from
 		var items = getState().items();
 		var markup = '';
@@ -75,7 +78,7 @@ mod.directive('pagemenu', function($compile, $location, $anchorScroll) {
 			}
 
 			// basic markup
-			markup += '<li pagemenuspy="' + item.link + '" parent="' + item.parent + '">';
+			markup += '<li pagemenuspy="' + item.link + '" parent="' + item.parent + '" ng-class="{\'inactive\': !isVisible(\'' + item.link + '\')}">';
 			markup += '<a href="#' + item.link + '">';
 			markup += item.text;
 			markup += '</a>';
@@ -84,6 +87,10 @@ mod.directive('pagemenu', function($compile, $location, $anchorScroll) {
 		element.append($compile(markup)(scope));
 
 		element.on('click', function(e) {
+			// Check if item is inactive
+			if (angular.element(e.target).hasClass('inactive')) {
+				return;
+			}
 			// menu item clicked, lets scroll to the associated dom item
 			var hash = e.target.hash.substring(1);
 			$location.hash(hash);
@@ -117,4 +124,4 @@ mod.directive('pagemenu', function($compile, $location, $anchorScroll) {
 			});
 		}
 	};
-});
+});