Change begin and end progress for target element

The following is for when there is a target element. Progress will begin
once the top of the viewport hits the top of the target element.
Progress will end once the bottom of the viewport hits the bottom of the
target element.

Author: petekeller2

src/js/lib/index.js

@@ -94,7 +94,7 @@ export default class ReadingProgress extends React.Component {
   measure() {
     this.targetHeight = this.targetEl.getBoundingClientRect().height
     this.viewportH = this.measureViewportHeight()
-    this.max = this.targetHeight - this.viewportH + this.targetEl.offsetTop
+    this.max = this.targetHeight - this.viewportH
   }
 
   handleResize = () => {
@@ -106,11 +106,19 @@ export default class ReadingProgress extends React.Component {
   }
 
   update = () => {
-    const value = !this.props.rootEl ?
+    let value = !this.props.rootEl ?
       window.pageYOffset || document.documentElement.scrollTop
       :
       this.rootEl.scrollTop
 
+    if (this.props.targetEl) {
+      if (0 <= this.targetEl.getBoundingClientRect().top) {
+        value = 0
+      } else {
+        value = value - (this.targetEl.getBoundingClientRect().top + window.pageYOffset)
+      }
+    }
+
     this.setState({
       value,
     })