Aunque esta solución parecía funcionar en todos los navegadores, ahora veo que en IE11 parece haber un problema con la última parte
Código:
if(this.pageYOffset > 200 && this.pageYOffset > position){
document.getElementById('main-menu').classList.add('hide');
}else{
document.getElementById('main-menu').classList.remove('hide');
}
Al bajar en la página, en cualquier altura, primero se añade la clase "hide" y luego se elimina, si subir con el scroll, es decir, la clase "hide" siempre resulta eliminada con lo que el bloque de navegación siempre se muestra.
Y la consola no muestra ningún problema.
Y es entonces cuando me doy cuenta de que el efecto funciona manejando el scroll con el pointer, porque si utilizo la rueda del ratón se produce el fallo.
¿Sabéis si es un bug de IE11 y si tiene solución?
Gracias.