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

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Johannes davidian

johannes davidian

27/06/2022 21:20:12
Quote Anchor link
Hallo,
ik heb een kleine probleem met on scrol naar boven met de header!

mij css code is :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
#change {
    visibility:hidden;
   margin-top:0;
  width:100%;  
   box-sizing: border-box;
position:fixed;
z-index:99999;    
}

#first-header-change {
    
    display:flex;
flex-direction:row;
justify-content:space-between;
align-items:center;
 background-color:#ffd978;
height:40px;

}


#second-header-change {
    
    display:flex;
flex-direction:row;
justify-content:flex-start;
align-items:center;
background-color:#4B5054;
height:40px;

}



mij javascript code is :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
 const header = document.querySelector ("header");
window.addEventListener ('scroll',()=> {
    if (window.scrollY > 24)  {
        
          
        header.classList.add ("change")
        change.style.visibility = "visible"; // Show element
      
    
        window.onscroll = function() { document.getElementById('change').style.marginTop = '-104px' }
        
        
        
    }
    else {
        
        header.classList.remove ("change") ;
        change.style.visibility = "hidden";  // hide element    
        
    }
})
    

</script>


wanneer ik scroll naar beneden het is OK.
maar wanneer ik scrol terug naar boven op laatste punt straalt de menu 1 second op de eerste header en verdwijnt.
U moet zelf proberen om te zien op url :http://webdesignleren.com/
gewoon naar beneden en langzaam naar boven.
wat kan het probleem zijn of hoe ik kan deze probleem oplossen?
dank u wel
johannes
 
PHP hulp

PHP hulp

19/08/2022 00:53:16
 
Jan Koehoorn

Jan Koehoorn

28/06/2022 11:28:55
Quote Anchor link
Zoals je het nu hebt, heb je een scroll event listener in de scroll event listener ingebouwd:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
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.
Gewijzigd op 28/06/2022 11:30:03 door Jan Koehoorn
 
Johannes davidian

johannes davidian

28/06/2022 14:34:04
Quote Anchor link
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 :
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
const change = document.querySelector('change');  ik moest deze lijn wegdoen


johannes
 
Jan Koehoorn

Jan Koehoorn

28/06/2022 18:04:19
Quote Anchor link
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.
 
Johannes davidian

johannes davidian

28/06/2022 18:06:56
Quote Anchor link
dank u wel
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.