Андрей

Вот решение

Вот, как можно сделать
В строке девять получаем высоту хидера

headerHeight = document.getElementsByTagName("header")[0].offsetHeight

В строке 20 проверяем, находится ли мышь ниже высоты хидера, и если да, то выходим из функции
if (event.pageY>headerHeight) return;

При загрузке страницы можно выбирать какие скрипты подключать следующим образом:

<script>
If (document.body.clientWidth>768){
	document.write('<script src=...>')
}
</script>

Судя по всему, проблема в плагине SyntaxHighlighter. После его отключения проблема исчезает.
У вас используется версия почти семилетней давности. Попробуйте обновить этот плагин

FadeIn и FadeOut скрывают и показывают изменяя display-свойство, при этом, для плавности скрытия и показывания используется opacity от 0 до определённого в css-свойствах (если не определено, то до 1). Таким образом, если вы определили в стиле opacity 0, то изменение будет от 0 до 0, и элемент не будет показан.

В вашем случае нужно в css использовать не opacity 0 а display none
https://jsfiddle.net/gk9v8epc/