sketch component and example

Author: shwilliam

examples/example-1.vue

@@ -1,18 +1,58 @@
 <template>
-  <div>
-      <VueScrollState />
-  </div>
+    <div>
+      <span class="pin">passed thing: {{passed}}</span>
+      
+      <div class="scroll-mark">scroll!</div>
+      
+      <div class="scroll-mark">keep scrolling!</div>
+      
+      <VueScrollState class="highlight" @scrolledIn="logStatus" />
+      
+      <div class="scroll-mark">scroll back!</div>
+    </div>
 </template>
 
 <script>
 import VueScrollState from "../src/vue-scroll-state.vue";
 export default {
   name: "Example1",
   data() {
-    return {};
+    return {
+      passed: false
+    };
+  },
+  methods: {
+    logStatus(e) {
+      this.passed = e;
+      e ? console.log("PASSED") : console.log("WENT BACK");
+    }
   },
   components: {
     VueScrollState
   }
 };
-</script>
+</script>
+
+<style>
+.pin {
+  position: fixed;
+  top: 0;
+  z-index: 999;
+  width: 100%;
+  height: 23px;
+}
+.scroll-mark {
+  width: 100px;
+  margin: 400px auto;
+  text-align: center;
+}
+.highlight {
+  display: block;
+  padding: 50px 0;
+  text-align: center;
+  background-color: rgba(0, 255, 0, 0.4);
+}
+.highlight:before {
+  content: "thing";
+}
+</style>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-scroll-state",
   "version": "0.1.0",
-  "description": "",
+  "description": "Vue component that helps you run a function when the node comes into view",
   "license": "MIT",
   "main": "dist/vue-scroll-state.umd.js",
   "module": "dist/vue-scroll-state.esm.js",

src/vue-scroll-state.vue

@@ -2,16 +2,32 @@
 export default {
   name: "VueScrollState",
   data() {
-    return {};
+    return {
+      showing: false
+    };
+  },
+  methods: {
+    checkNodeVisibility() {
+      const { scrollY, innerHeight } = window;
+      const isShowing = scrollY + innerHeight > this.$el.offsetTop;
+
+      if (isShowing !== this.showing) {
+        this.$emit("scrolledIn", isShowing);
+        this.showing = isShowing;
+      }
+    }
+  },
+  created() {
+    window.addEventListener("scroll", this.checkNodeVisibility);
+    window.addEventListener("resize", this.checkNodeVisibility);
+  },
+  destroyed() {
+    window.removeEventListener("scroll", this.checkNodeVisibility);
+    window.removeEventListener("resize", this.checkNodeVisibility);
   }
 };
 </script>
 
 <template>
-    <div class="vue-scroll-state">
-        hello world
-    </div>
+  <span/>
 </template>
-
-<style scoped>
-</style>