Jsem stavební aplikace ve Štíhlé a já se snažím přidat k ní dříve napsal .js
soubor. Snažil jsem se importovat v main.js
souboru, ale dává mi chybu: Cannot read properties of null (reading 'offsetHeight')
To je .js
soubor:
[...]
function colorSubheadings() {
// Replace subheading background colors
var redStart = 255;
var greenStart = 255;
var blueStart = 255;
var redEnd = 249;
var greenEnd = 250;
var blueEnd = 251;
var redDiff = redEnd - redStart;
var greenDiff = greenEnd - greenStart;
var blueDiff = blueEnd - blueStart;
var page = document.querySelector('.page');
var pageHeight = page.offsetHeight;
var subheadings = document.getElementsByClassName('.chapter');
for (var i = 0; i < subheadings.length; i++) {
// Get the position relative to .page
var span = subheadings[i].querySelector('span');
var factor = span.offsetTop / pageHeight;
var r = Math.floor(redDiff * factor + redStart);
var g = Math.floor(greenDiff * factor + greenStart);
var b = Math.floor(blueDiff * factor + blueStart);
var color = 'rgb(' + r + ',' + g + ',' + b + ')';
// Color background based on position
span.style.backgroundColor = color;
span.style.boxShadow = '11px 0 0 ' + color + ', -13px 0 0 ' + color;
}
}
[...]
A to je .svelte
soubor:
<script>
//some functions
</script>
<div class="page">
[...]
<div class="chapter-sidebar">
<div class="sidebar js-sidebar">
<div class="sidebar__wrapper">
<ul class="sidebar__list">
{#each files as { file } (file.name)}
<li class="sidebar__list-item">
<a class="sidebar__link" href="#temp">{file.name.split('.').slice(0, -1).join('.')}</a>
</li>
{/each}
</ul>
</div>
</div>
V .svelte
soubor tam je boční navigační lišty, stejně jako to. V vanilky html to funguje perfektně, ale s štíhlý tam jsou některé chyby, jako navBar nemá "držet" v místě: když jsem se posunout dolů zůstává na horní části stránky, místo zůstávají v konkrétním místě obrazovky, "následující" uživatele scroll. Takže, co mohu udělat, aby se používat tento .js
soubor v mé štíhlé projektu? Zkoušel jsem i toto řešení, ale nezabralo to pro mě.
Díky advace.