Скрол фиксированного меню как в ВК как реализовать?

Question

[Дмитрий]

Доброго времени суток!
Хочу реализовать левое меню с прокруткой как на сайте вк
https://vk.com/dev.php?method=manuals
То есть, когда оно заканчивается при скроле, то фиксируется в своем положении (не поднимается выше), а когда скролл идет вверх, то сразу поднимается.
Я использовал следующий код, но это не решение, так как блок меню начинает опускаться только тогда, когда высота скрола меньше 1000px

<section>
  <div class="api-nav">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    </div>
</section>

section{
  width:50%;
  height:1000px;
  margin:auto;
  background:linear-gradient(to top, #fefcea, #000);
}

p {
  margin:0;
  border-bottom:1px solid #000;
  padding-top:10px;
  padding-bottom:10px;
}
p:hover {
  cursor:pointer;
  background:red;
}
.api-nav {
  transform: translateX(-110%);
  background: aqua;
  text-align: center;
  position:fixed;
  width:100px;
  margin-right:100%;
  top:0;
}

let leftNav = document.querySelector('.api-nav');

let menuScroll = (evt) => {
    if(document.documentElement.clientWidth > 1190) {
        leftNav.style.top = -scrollY + "px";
    
        if (scrollY > 1000){
            leftNav.style.top = -1000 + "px";
        }
        

    }
    
}

window.addEventListener('scroll', menuScroll)

P.S Почему тот Тут он не работает

Comments

[Антон]

Попробуйте в css position:sticky использовать для своей задачи. И прочитайте про это.

Answer 1

[Denis]

Вы ошибаетесь, это не fixed.
Это position:sticky

JS уберите, он ломает поведение.

section{
  width:50%;
  height:1000px;
  margin: 0 auto;
  background: linear-gradient(to top, #fefcea, #000);
}

p {
  margin: 0;
  border-bottom: 1px solid #000;
  padding-top: 10px;
  padding-bottom: 10px;
}
p:hover {
  cursor: pointer;
  background: red;
}
.api-nav {
  transform: translateX(-110%);
  background-color: aqua;
  text-align: center;
  position: sticky;
  width:100px;
  min-height: 100px;
  margin: 0; padding: 0;
  top: 0;
}

Comments

[Дмитрий]

Тогда меню начинает скролиться только если я дохожу до самого низа родительского элемента

[Дмитрий]

Хотелось бы чтоб в точности как в ВК логика была

[Denis]

Azazel1928, sticky плавает в пределах родительского элемента. Создайте ещё 2 блока. Первый будет выше, чем документация, второй ниже неё.

[Denis]

Azazel1928, перепроверил. Результат ровно тот же, как вы нам показываете из документации VK.