I need help taking a script written for a static html page and using it in a Blazor project running Web Assembly. The script basically adds/removes classes based on scrolling. I have read articles about calling javascript from blazor (such as here), but I am not knowledgeable enough to put it all together. I particularly don't understand how to incorporate it into the "@code{}" area at the bottom of the app index page.
I made a demo using blazorfiddle. (Fyi) I can't create it in SO due to Web Assembly, but I have included the script and index page below. Any help is much appreciated!
JS:
(function() {"use strict"; /** * Easy selector helper function */ const select = (el, all = false) => { el = el.trim() if (all) { return [...document.querySelectorAll(el)] } else { return document.querySelector(el) } } /** * Easy on scroll event listener */ const onscroll = (el, listener) => { el.addEventListener('scroll', listener) } /** * Hide topbar on scroll */ let selectTopbar = select('.topbar') let selectMenubar = select('.menubar') if (selectMenubar) { const menuScrolled = () => { if (window.scrollY > 100) { selectMenubar.classList.add('menu-scrolled') if (selectTopbar) { selectTopbar.classList.add('topbar-scrolled') } } else { selectMenubar.classList.remove('menu-scrolled') if (selectTopbar) { selectTopbar.classList.remove('topbar-scrolled') } } } window.addEventListener('load', menuScrolled) onscroll(document, menuScrolled) }})()Blazor index:
@page "/"@page "/MatDrawerResponsiveFrame"<MatDrawerContainer class="nav-drawer-container"><MatTabGroup class="nav-tabgroup-container"><div class="topbar">Hello</div><div class="menubar"><a class="flhc" href="#" aria-label="home">HOME</a><MatTab></MatTab><MatTab Label="Testing"><div class="nav-list"><span class="nav-description">TESTING<br><small>Select a test to see a collection of tests about testing.</small></span><div><h4>Test 1</h4><ul><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li></ul></div><div><h4>Test 2</h4><ul><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li></ul></div><div><h4>Test 3</h4><ul><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li></ul></div><div><h4>Test 4</h4><ul><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li></ul></div></div></MatTab><MatTab Label="Tested Indicators"><div class="nav-list"><span class="nav-description">TESTED Indicators<br><small>Select a test to see a collection of tests about testing.</small></span><div><h4>Test 1</h4><ul><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li></ul></div><div><h4>Test 2</h4><ul><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li></ul></div><div><h4>Test 3</h4><ul><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li></ul></div><div><h4>Test 4</h4><ul><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li></ul></div></div></MatTab><MatTab Label="Systems Tested"><div class="nav-list"><span class="nav-description">SYSTEMS Tested<br><small>Select a test to see a collection of tests about testing.</small></span><div><h4>Test 1</h4><ul><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li></ul></div><div><h4>Test 2</h4><ul><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li></ul></div><div><h4>Test 3</h4><ul><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li></ul></div><div><h4>Test 4</h4><ul><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li></ul></div></div></MatTab><MatTab Label="Retesting"><div class="nav-list"><span class="nav-description">RETESTING<br><small>Select a test to see a collection of tests about testing.</small></span><div><h4>Test 1</h4><ul><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li></ul></div><div><h4>Test 2</h4><ul><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li></ul></div><div><h4>Test 3</h4><ul><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li></ul></div><div><h4>Test 4</h4><ul><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li><li><a href="#">Test</a></li></ul></div></div></MatTab></div></MatTabGroup></MatDrawerContainer><section id="hero"><div class="herosearch"><div><h1>Test Title</h1><p>Some information about the tests results.</p><form class="roundsearchbar" role="search"><input class="form-control" type="search" placeholder="Start typing to search" aria-label="Search"><span class="switch-text"><em class="switch">Type a test word</em><em class="switch">Find a specific test</em><em class="switch">Search for tests</em><em class="switch">Find more tests</em></span><input type="submit" value="Search"></form></div></div></section>@code{ bool Opened = true; void ButtonClicked() { Opened = !Opened; }}I have looked around for a similar demo/example but can't seem to find anything.