Navbar становится липким при прокрутке даже на 1px - я хочу, чтобы он появлялся только при прокрутке более 10px

Question

Я работаю над панелью навигации, которая всегда привязана к мобильному устройству и исчезает при прокрутке вниз, но появляется снова при прокрутке вверх на рабочем столе.

Теперь она работает отлично, но у меня есть одна проблема. На рабочем столе он становится липким при прокрутке сразу. Даже если я прокручиваю немного, что может раздражать.

Я хочу, чтобы он появлялся только при прокрутке больше, чем, скажем, 10px. Поэтому мне нужно добавить порог. Я думаю, это можно сделать с помощью JS, но я новичок.

Вот что я имею в виду: 1011 *https://jsfiddle.net/zsoltszilvai/zfqd901m/4/

Буду признателен за любую помощь:)

var sticky = header.offsetTop;

var prevScrollpos = window.pageYOffset;

function myFunction(x) {
  if (x.matches) {

    window.onscroll = function() {
      var currentScrollPos = window.pageYOffset;
    }

  } else {
    window.onscroll = function() {
      var currentScrollPos = window.pageYOffset;
      if (prevScrollpos > currentScrollPos) {
        document.getElementById("navbar").style.top = "0";
        if (window.pageYOffset > sticky) {
          header.classList.add("sticky");
        }
      } else {
        document.getElementById("navbar").style.top = "-58px";
        if (window.pageYOffset < sticky) {
          header.classList.remove("sticky");
        }
      }
      prevScrollpos = currentScrollPos;
    }
  }
}

Answer 1

Вам нужно изменить prevScrollpos > currentScrollPos на prevScrollpos - currentScrollPos > 10, только сложная задача - не обновлять prevScrollpos, если разница меньше порогового значения.

var prevScrollpos = window.pageYOffset;
var SCROLL_UP_THRESHOLD = 200

function myFunction(x) {
  window.onscroll = function() {
    var currentScrollPos = window.pageYOffset;
    console.log(prevScrollpos, currentScrollPos)
    if (prevScrollpos > currentScrollPos) {
      if (prevScrollpos - currentScrollPos < SCROLL_UP_THRESHOLD) 
        return console.log("not opening")
      document.getElementById("navbar").style.top = "0";
      if (window.pageYOffset > sticky) {
        header.classList.add("sticky");
      }
      prevScrollpos = currentScrollPos;
    } else {
      document.getElementById("navbar").style.top = "-58px";
      if (window.pageYOffset < sticky) {
        header.classList.remove("sticky");
      }
      prevScrollpos = currentScrollPos;
    }
  }
}