Allow click events to pass through the toolbar padding.

elements/viewer-page-indicator/viewer-page-indicator.html

 <polymer-element name="viewer-page-indicator" attributes="text">
 <template>
   <link rel="stylesheet" href="viewer-page-indicator.css">
   <div id="text">{{text}}</div>
   <div id="triangle-right"></div>
 </template>
 <script>
   Polymer('viewer-page-indicator', {
     text: '1',
     timerId: undefined,
     ready: function() {
-      var scrollCallback = function() {
-        var percent = window.scrollY /
-            (document.body.scrollHeight -
-             document.documentElement.clientHeight);
-        this.style.top = percent *
-            (document.documentElement.clientHeight - this.offsetHeight) + 'px';
-        this.style.opacity = 1;
-        clearTimeout(this.timerId);
+      var callback = this.fadeIn.bind(this, 2000);
+      window.addEventListener('scroll', function() {
+        requestAnimationFrame(callback);
+      });
+    },
+    initialFadeIn: function() {
+      this.fadeIn(6000);
+    },
+    fadeIn: function(displayTime) {
+      var percent = window.scrollY /
+          (document.body.scrollHeight -
+           document.documentElement.clientHeight);
+      this.style.top = percent *
+          (document.documentElement.clientHeight - this.offsetHeight) + 'px';
+      this.style.opacity = 1;
+      clearTimeout(this.timerId);
 
-        this.timerId = setTimeout(function() {
-          this.style.opacity = 0;
-          this.timerId = undefined;
-        }.bind(this), 2000);
-      }.bind(this);
-      window.addEventListener('scroll', function() {
-        requestAnimationFrame(scrollCallback);
-      });
-
-      scrollCallback();
-    },
+      this.timerId = setTimeout(function() {
+        this.style.opacity = 0;
+        this.timerId = undefined;
+      }.bind(this), displayTime);
+    }
   });
 </script>
 </polymer-element>