wanneer ik scrol naar boven straalt de menu op bovenste gedeelde van de header dubbel en verdwijnt!

Zoals je het nu hebt, heb je een scroll event listener in de scroll event listener ingebouwd:

 const header = document.querySelector('header');
 const change = document.querySelector('change');

 // de eerste listener
 window.addEventListener('scroll', () => {
     if (window.scrollY > 24) {
         header.classList.add('change');
         change.style.visibility = 'visible';

         // de tweede listener
         window.onscroll = function() {
            document.getElementById('change').style.marginTop = '-104px';
        }
     } else {
         header.classList.remove('change');
         change.style.visibility = 'hidden';
     }
 })

Ik kan me voorstellen dat het de boel onwijs vertraagt als je op elk scroll event een nieuwe listener binnen de bestaande listener aanmaakt. Waarom niet gewoon zo:

const header = document.querySelector('header');
const change = document.querySelector('change');

window.addEventListener('scroll', () => {
    if (window.scrollY > 24) {
        header.classList.add('change');
        change.style.visibility = 'visible';
        change.style.marginTop = '-104px';
    } else {
        header.classList.remove('change');
        change.style.visibility = 'hidden';
    }
});

Nog een tip: de meeste code-editors hebben tegenwoordig wel opties om je code automatisch te formatteren. Nu is het erg rommelig, met onregelmatig inspringen en willekeurige lege regels op onverwachte plekken. Schrijf netjes, dan leest je code veel gemakkelijker.

dank u wel ,
ik had de probleem gevonden . dat was in plaats van (visibility: hidden )het moest (display none) zijn in css en in java script.
ik heb voor zekerheid u code getest.
1- het ging helemaal fout ik moest tweede line (constant change) weg halen toen heeft gewerkt. maar het probleem blijft het zelfde tot dat ik heb visibility met display vervangen.

iedere geval dank u wel voor de tip dat ik gebruik maakte van een scroll event listener in de scroll event listener.

ik heb u code geplaatst in plaats van mij code maar ik moest tweede line constant change weghalen plus ik moest visibilty met display vervangen.

ik wil alleen weten waarom u code heeft niet gewerkt met de bijgevoegd tweede lijn const change :

const change = document.querySelector('change');  ik moest deze lijn wegdoen

johannes

Waarschijnlijk mag de naam "change" niet als variabelenaam gebruikt worden omdat het ook de naam van een functie is. Ik denk als je hem zou vervangen door divChange oid, dat het wel zou werken.

dank u wel