show sponsor logos in full color when scrolled down

Author: yyx990803

themes/vue/layout/index.ejs

@@ -61,14 +61,35 @@
 </div>
 
 <script>
-var topScrolled = false
-window.addEventListener('scroll', function () {
-  if (window.pageYOffset > 165 && !topScrolled) {
-    topScrolled = true
-    document.getElementById('mobile-bar').classList.remove('top')
-  } else if (window.pageYOffset <= 165 && topScrolled) {
-    topScrolled = false
-    document.getElementById('mobile-bar').classList.add('top')
-  }
-})
+(function () {
+  var topScrolled = false
+  var sponsors = document.getElementById('sponsors')
+  var sponsorTop = sponsors.offsetTop
+  var sponsorActive = false
+
+  window.addEventListener('resize', function () {
+    sponsorTop = sponsors.offsetTop
+  })
+
+  window.addEventListener('scroll', function () {
+    if (window.pageYOffset > 165 && !topScrolled) {
+      topScrolled = true
+      document.getElementById('mobile-bar').classList.remove('top')
+    } else if (window.pageYOffset <= 165 && topScrolled) {
+      topScrolled = false
+      document.getElementById('mobile-bar').classList.add('top')
+    }
+    if (window.pageYOffset > sponsorTop - 100) {
+      if (!sponsorActive) {
+        sponsorActive = true
+        sponsors.classList.add('active')
+      }
+    } else {
+      if (sponsorActive) {
+        sponsorActive = false
+        sponsors.classList.remove('active')
+      }
+    }
+  })
+})()
 </script>

themes/vue/layout/partials/sponsors.ejs

@@ -4,6 +4,7 @@
   <img style="width: 180px" src="<%- url_for("/images/stdlib.png") %>">
 </a>
 <br>
+<br>
 <a href="https://deepstreamhub.com" target="_blank" style="width:130px;top:1px">
   <img src="<%- url_for("/images/deepstream.png") %>" style="width:130px">
 </a>

themes/vue/source/css/_sponsor.styl

@@ -47,6 +47,10 @@
     h4
       color #999
       margin-bottom 0
+  &.active
+    img
+      filter: none
+      opacity: 1
 
 // support-vuejs page
 .content