Как показать/скрыть блок меню при скролле страницы (JQuery без плагинов)?

Question

[makintosh87]

При скролле страницы нужно показать блок меню, когда пользователь пролистал header и скрыть когда достигает footer, контент наполняется динамически, высота страницы не фиксированная, блок должен появляться при определенной ширине и не появляться когда эта ширина меньше. Как это реализовать на JQuery без плагина? Помогите кодом или ссылкой на касающеюся тему(было бы не плохо объяснение решения данной задачи ). Заранее благодарю!

Answer 1

[profesor08]

Например как-то так:

var element = document.querySelector("#menu");
document.onscroll = function() {
    if (document.body.scrollTop > 200 && document.body.scrollTop < (document.body.scrollHeight - 500)) 
    {
        element.style.display = "block";
    }
    else
    {
        element.style.display = "none";
    }
};

200 - высота сверху откуда начинает показываться
500 - высота снизу откуда скрывается

Answer 2

[Виталий Инчин ☢]

Держите: клац