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.