Показать/скрыть меню при скролле как в веб приложениях

Question

Есть меню, которое при прокрутке вниз должно исчезать ровно настолько насколько человек проскроллил пока не исчезнет полностью, и аналогично при скролле вверх пока не покажется полностью. Пример такого меню есть в ВК, когда находишься на странице новостей или на странице https://developers.google.com/web/updates/ Синее меню ведет себя именно так как мне нужно.

Кто-нибудь сталкивался? Может есть идеи где искать?

вот решение https://jsfiddle.net/dsbj3h4c/ на VUE js. Теперь тружусь над переносом всего этого на обычный jquery

Answer 1

var el = document.querySelector('nav'),
    sH = el.offsetHeight,
    sY = el.getBoundingClientRect().top+sH;
    
window.addEventListener('scroll', function(){
  if(this.scrollY >= sY && this.scrollY <= sY+sH) {
    el.style.transform = 'translateY(-'+(this.scrollY-sY)/sH*100+'%)';
  } else if(this.scrollY < sY) {
    el.style.transform = 'translateY(0%)';
  } else if(this.scrollY < this.scrollY <= sY+sH) {
    el.style.transform = 'translateY(-100%)';
  }
});

body {
  height: 200vh;
  background: url('//i.stack.imgur.com/m9NKc.png');
}

header {
  display: block;
  width: 100%;
  height: 100px;
  background: gray;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
}

nav {
  display: block;
  width: 100%;
  height: 50px;
  background: blue;
  position: fixed;
  top: 100px;
  left: 0;
  z-index: 1;
}

<header></header>
<nav></nav>

Answer 2

Вот правильно решение

let elY = 0;
let scrollY = 0;
window.addEventListener("scroll", function() {
    const el = document.querySelector('.header');
    const height = el.offsetHeight;
    const pos = window.pageYOffset;
    const diff = scrollY - pos;

    elY = Math.min(0, Math.max(-height, elY + diff));
    el.style.position = pos >= height ? 'fixed' : pos === 0 ? 'absolute' : el.style.position;
    el.style.transform = `translateY(${el.style.position === 'fixed' ? elY : 0}px)`;

    scrollY = pos;
})

Answer 3

При создании такого меню есть некоторые нюансы. В сафари при прокрутке до самого конца меню появляется, хотя фактически скролла вверх нет. Вот такой вариант помогает избежать этого (написано на jQuery для себя, но суть понятна):

let headerNav = $('header > nav')
let scrollPrev = 0
$(window).scroll(function () {
    let scrolled = $(window).scrollTop()

    if (scrolled > 200) {
        if (scrolled < scrollPrev - 10) {
            headerNav.removeClass('out') // show
        }

        if (scrolled > scrollPrev) {
            headerNav.addClass('out') // hide
        }
    } else {
        headerNav.removeClass('out') // show
    }
    scrollPrev = scrolled
})

БЛОГ НА HUSL

Показать/скрыть меню при скролле как в веб приложениях

Ответы (3 шт):