wanneer ik scrol naar boven straalt de menu op bovenste gedeelde van de header dubbel en verdwijnt!
ik heb een kleine probleem met on scrol naar boven met de header!
mij css code is :
Code (php)
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
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;
}
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)
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
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>
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
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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';
}
})
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)
1
2
3
4
5
6
7
8
9
10
11
12
13
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';
}
});
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
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)
1
const change = document.querySelector('change'); ik moest deze lijn wegdoen
johannes