diff --git a/resources/assets/src/scripts/home-page.ts b/resources/assets/src/scripts/home-page.ts
new file mode 100644
index 00000000..e999bf82
--- /dev/null
+++ b/resources/assets/src/scripts/home-page.ts
@@ -0,0 +1,17 @@
+function handler() {
+ const header = document.querySelector('.main-header')
+ /* istanbul ignore else */
+ if (header) {
+ window.addEventListener('scroll', () => {
+ if (window.scrollY >= window.innerHeight * 2 / 3) {
+ header.classList.remove('transparent')
+ } else {
+ header.classList.add('transparent')
+ }
+ })
+ }
+}
+
+window.addEventListener('load', handler)
+
+export default handler
diff --git a/resources/assets/src/scripts/route.ts b/resources/assets/src/scripts/route.ts
index 888d1abd..3b386d00 100644
--- a/resources/assets/src/scripts/route.ts
+++ b/resources/assets/src/scripts/route.ts
@@ -1,7 +1,10 @@
export default [
{
path: '/',
- module: [() => import('../styles/home.styl')],
+ module: [
+ () => import('../styles/home.styl'),
+ () => import('./home-page'),
+ ],
},
{
path: 'user',
diff --git a/resources/assets/tests/scripts/home-page.test.ts b/resources/assets/tests/scripts/home-page.test.ts
new file mode 100644
index 00000000..5cb2eb99
--- /dev/null
+++ b/resources/assets/tests/scripts/home-page.test.ts
@@ -0,0 +1,21 @@
+import handler from '@/scripts/home-page'
+
+test('should be transparent at top', () => {
+ Object.assign(window, { innerHeight: 900 })
+ document.body.innerHTML = '