I am using a progress bar that increases the more you scroll in my website. This is the code:
<script>
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight -
document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>
1st Challenge:
The problem is that I use Ajax and even if a give it a condition to only fire when page path = "/", when I go to other pages it's still there since there is no actual page reload.
💭 ... How can I get the script to stop or hide the element when that happens? ... 💭
The condition I'm currently using for that (not working):
if (window.location.pathname == "/") {
} else {
document.getElementById('pendejada').style.display = 'none';
}
2nd Challenge:
Also, I have hash changes in the URL when you click at the menu on top but they don't take you elsewhere, you stay on the same page.
💭 ... How can I get the function to stop when page path is not "/", like mentioned above, but without being interfered by these hash changes... 💭
I tried using this but it was not a smart option because when the page path changes none of this happen:
window.addEventListener('hashchange|popstate' )
I appreciate you guys helping me :) 🙌
Aucun commentaire:
Enregistrer un commentaire