reduce NodeView header size on scroll

src/components/nodes/NodeView.vue

@@ -8,9 +8,10 @@
         :is="'node-view-header-' + nodeType"
         v-bind="{ node, mode, showOrigin }"
         class="node-view-header"
+        :class="{ scrolling }"
       />
 
-      <node-view-body v-bind="{ node, type: nodeType, mode }" />
+      <node-view-body v-bind="{ node, type: nodeType, mode }" :class="{ scrolling }"/>
 
       <node-view-footer
         v-bind="{ node, mode, type: nodeType, preview, showOrigin }"
@@ -63,6 +64,12 @@ export default {
     showOrigin: { type: Boolean, default: false }
   },
 
+  data () {
+    return {
+      scrolling: false
+    }
+  },
+
   computed: {
     loading () {
       const dataLevel = this.mode === 'view' ? 2 : 1
@@ -77,6 +84,25 @@ export default {
       if (this.forceType) return this.forceType
       return this.node !== undefined ? this.node.type : this.type
     }
+  },
+
+  methods: {
+    onScroll ({ target }) {
+      const prev = this.scrolling
+      this.scrolling = target.scrollTop !== 0
+      if (this.scrolling && !prev) {
+        this.$el.scrollTo(0, 1)
+      }
+    }
+  },
+
+  mounted () {
+    this.scrolling = this.$el.scrollTop !== 0
+    this.$el.addEventListener('scroll', this.onScroll)
+  },
+
+  beforeDestroy () {
+    this.$el.removeEventListener('scroll', this.onScroll)
   }
 }
 </script>
@@ -161,6 +187,24 @@ export default {
       position: sticky;
       top: 0;
       z-index: 1;
+
+      &-ref.scrolling {
+
+        h4 {
+          font-size: 1.2rem;
+        }
+        .edition {
+          font-size: 0.8rem;
+        }
+      }
+    }
+  }
+
+  &-view &-body {
+    @include media-breakpoint-up($layout-bp) {
+      &-ref.scrolling {
+        padding-top: 4rem;
+      }
     }
   }