diff --git a/README.md b/README.md
index ffb00a6..be79f04 100644
--- a/README.md
+++ b/README.md
@@ -142,6 +142,14 @@ containing:
 - `throttle`: a number indicating a millisecond value of throttle which will
   limit the in-view event firing rate to happen every that many milliseconds
 
+- `considerPageVisibility`: A boolean indicating whether or not the page
+  visibility should be considered when marking an element as visible or not
+  (default false).
+
+- `considerDocumentFocus`: A boolean indicating whether or not the document
+  focus should be considered when marking an element as visible or not
+  (default false).
+
 ### InViewContainer
 
 Use `in-view-container` when you have a scrollable container that contains `in-view`
diff --git a/angular-inview.js b/angular-inview.js
index debc09e..1d2cf26 100644
--- a/angular-inview.js
+++ b/angular-inview.js
@@ -62,7 +62,17 @@ function inViewDirective ($parse) {
       var viewportEventSignal = signalSingle({ type: 'initial' })
 
       // Merged with the window events
-      .merge(signalFromEvent(window, 'checkInView click ready wheel mousewheel DomMouseScroll MozMousePixelScroll resize scroll touchmove mouseup keydown'))
+      .merge(signalFromEvent(window, 'checkInView click ready wheel mousewheel DomMouseScroll MozMousePixelScroll resize scroll touchmove mouseup keydown'));
+
+      // Merged with the page visibility events
+      if (options.considerPageVisibility) {
+        viewportEventSignal = viewportEventSignal.merge(signalFromEvent(document, 'visibilitychange'));
+      }
+
+      // Merged with the page focus/blur events
+      if (options.considerPageFocus) {
+        viewportEventSignal = viewportEventSignal.merge(signalFromEvent(window, 'focus blur'));
+      }
 
       // Merge with container's events signal
       if (container) {
@@ -94,8 +104,10 @@ function inViewDirective ($parse) {
         viewportRect = offsetRect(viewportRect, options.viewportOffset);
         var elementRect = offsetRect(element[0].getBoundingClientRect(), options.offset);
         var isVisible = !!(element[0].offsetWidth || element[0].offsetHeight || element[0].getClientRects().length);
+        var documentVisible = !options.considerPageVisibility || document.visibilityState === 'visible' || document.hidden === false;
+        var documentFocussed = !options.considerPageFocus || document.hasFocus();
         var info = {
-          inView: isVisible && intersectRect(elementRect, viewportRect),
+          inView: documentVisible && documentFocussed && isVisible && intersectRect(elementRect, viewportRect),
           event: event,
           element: element,
           elementRect: elementRect,
diff --git a/examples/pagefocus.html b/examples/pagefocus.html
new file mode 100644
index 0000000..8c2401c
--- /dev/null
+++ b/examples/pagefocus.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="pageFocusApp">
+<head>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>angular-inview basic example</title>
+	<style type="text/css">
+	#hud {
+		background: white;
+		border: 1px solid gray;
+		bottom: 0;
+		margin: 20px;
+		min-width: 220px;
+		position: fixed;
+		right: 0;
+		top: 0;
+		width: 25%;
+		overflow: auto;
+	}
+
+	#lines {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	#lines li {
+		height: 100px;
+	}
+
+	#lines li:nth-child(odd) {
+		background-color: lightgray;
+	}
+	</style>
+</head>
+<body ng-controller="basicCtrl">
+
+	<div id="hud">
+		<ul>
+			<li ng-repeat="l in inviewLogs" ng-bind-html="l.message"></li>
+		</ul>
+	</div>
+
+	<ul id="lines">
+		<li ng-repeat="t in testLines"
+            in-view="lineInView($index, $inview, $inviewInfo)"
+            in-view-options="{ considerPageFocus: true }">This is test line #{{$index}}</li>
+	</ul>
+
+	<script src="../node_modules/angular/angular.js"></script>
+	<script src="../angular-inview.js"></script>
+	<script type="text/javascript">
+	angular.module('pageFocusApp', ['angular-inview']).controller('basicCtrl', function basicCtrl ($scope, $sce) {
+		var logId = 0;
+		$scope.testLines = [];
+		for (var i = 20; i >= 0; i--) {
+			$scope.testLines.push(i);
+		};
+		$scope.inviewLogs = [];
+		$scope.lineInView = function(index, inview, inviewInfo) {
+            console.log('inview', index);
+			var inViewReport = inview ? '<strong>enters</strong>' : '<strong>exit</strong>';
+			var inviewpart = [];
+			for (var p in inviewInfo.parts) {
+				if (inviewInfo.parts[p]) {
+					inviewpart.push(p);
+				}
+			}
+			inviewpart = inviewpart.length % 4 === 0 ? 'all' : inviewpart.join(', ');
+			if (typeof(inviewpart) != 'undefined') {
+				inViewReport = '<strong>' + inviewpart + '</strong> parts ' + inViewReport;
+			}
+			$scope.inviewLogs.unshift({ id: logId++, message: $sce.trustAsHtml('Line <em>#' + index + '</em>: ' + inViewReport) });
+			return false;
+		}
+        document.addEventListener('focus', () => {
+            $scope.$apply(() => {
+                $scope.inviewLogs.unshift({ id: logId++, message: $sce.trustAsHtml('Document: focussed') });
+            });
+        });
+        document.addEventListener('blur', () => {
+            $scope.$apply(() => {
+                $scope.inviewLogs.unshift({ id: logId++, message: $sce.trustAsHtml('Document: lost focus') });
+            });
+        });
+	});
+	</script>
+</body>
+</html>
diff --git a/examples/pagevisibility.html b/examples/pagevisibility.html
new file mode 100644
index 0000000..40d3e8a
--- /dev/null
+++ b/examples/pagevisibility.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="pageVisibilityApp">
+<head>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>angular-inview basic example</title>
+	<style type="text/css">
+	#hud {
+		background: white;
+		border: 1px solid gray;
+		bottom: 0;
+		margin: 20px;
+		min-width: 220px;
+		position: fixed;
+		right: 0;
+		top: 0;
+		width: 25%;
+		overflow: auto;
+	}
+
+	#lines {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	#lines li {
+		height: 100px;
+	}
+
+	#lines li:nth-child(odd) {
+		background-color: lightgray;
+	}
+	</style>
+</head>
+<body ng-controller="basicCtrl">
+
+	<div id="hud">
+		<ul>
+			<li ng-repeat="l in inviewLogs" ng-bind-html="l.message"></li>
+		</ul>
+	</div>
+
+	<ul id="lines">
+		<li ng-repeat="t in testLines"
+            in-view="lineInView($index, $inview, $inviewInfo)"
+            in-view-options="{ considerPageVisibility: true }">This is test line #{{$index}}</li>
+	</ul>
+
+	<script src="../node_modules/angular/angular.js"></script>
+	<script src="../angular-inview.js"></script>
+	<script type="text/javascript">
+	angular.module('pageVisibilityApp', ['angular-inview']).controller('basicCtrl', function basicCtrl ($scope, $sce) {
+		var logId = 0;
+		$scope.testLines = [];
+		for (var i = 20; i >= 0; i--) {
+			$scope.testLines.push(i);
+		};
+		$scope.inviewLogs = [];
+		$scope.lineInView = function(index, inview, inviewInfo) {
+            console.log('inview', index);
+			var inViewReport = inview ? '<strong>enters</strong>' : '<strong>exit</strong>';
+			var inviewpart = [];
+			for (var p in inviewInfo.parts) {
+				if (inviewInfo.parts[p]) {
+					inviewpart.push(p);
+				}
+			}
+			inviewpart = inviewpart.length % 4 === 0 ? 'all' : inviewpart.join(', ');
+			if (typeof(inviewpart) != 'undefined') {
+				inViewReport = '<strong>' + inviewpart + '</strong> parts ' + inViewReport;
+			}
+			$scope.inviewLogs.unshift({ id: logId++, message: $sce.trustAsHtml('Line <em>#' + index + '</em>: ' + inViewReport) });
+			return false;
+		}
+        document.addEventListener('visibilitychange', () => {
+            $scope.$apply(() => {
+                $scope.inviewLogs.unshift({ id: logId++, message: $sce.trustAsHtml('Document: ' + document.visibilityState) });
+            });
+        });
+	});
+	</script>
+</body>
+</html>
