Запустите функцию, если scrollTop больше высоты окна

У меня проблемы с этим. У меня есть функция, которая скрывает / показывает заголовок при прокрутке. Вы можете увидеть это в действии здесь.

var header = document.querySelectorAll('.header')[0];
function headsUp(el) {
    var elH = el.clientHeight,
        offset = 0,
        lastScroll = 0;
    function makeOffset() {
        var scrollY = document.documentElement.scrollTop || document.body.scrollTop,
            diff = scrollY - lastScroll;
        offset = (offset + diff > elH) ? elH : (scrollY < 0) ? 0 : offset + diff;
        offset = (offset < 0) ? 0 : offset;
        el.style.top = (-offset) + 'px';
        lastScroll = scrollY;
    }
    if (window.addEventListener) return window.addEventListener('scroll', makeOffset);
    window.attachEvent('onscroll', makeOffset);
}

Я хочу запускать эту функцию в заголовке только тогда, когда прокрутка сверху больше высоты окна. Я использую следующий код:

$(window).scroll(function(){
  var   windowHeight = $(window).height();
  var st = $(this).scrollTop(); 
  if (st > windowHeight){ 
      headsUp(header);
  } else {

    if(st < windowHeight - 60) { 

    }
  }
});

У меня есть две проблемы с этим:

1) Я не знаю, как отключить функцию, когда прокрутка сверху меньше высоты окна - 60 (высота заголовка).

2) Вызов функции, когда прокрутка сверху превышает высоту окна, не работает должным образом. Это очень странно, но функция активна, когда прокрутка сверху больше высоты окна, но работает только в той части, которая меньше высоты окна, только наоборот.

Codepen

0 ответов

Другие вопросы по тегам