Редактировать значение CSS, когда пользователь находится внизу страницы

Question

У меня фактически есть липкое меню, которое следует за прокруткой с этим css:

.menuD {
  position: sticky;
  top : 190px;
}

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

top: 590px

, когда пользователь находится внизу страницы.У вас есть идеи, как это сделать?Я думаю, мне нужно JS ...

На самом деле, меню будет высоким (потому что сверху всего 190px)

Спасибо

Answer 1

Вы можете рассчитать, если вы находитесь внизу страницы с прокруткой.

Вот решение с чистым javascript

Затем добавьте класс к div, используя classList, который определяет новое свойство css.В этом примере: top: 590px вместо top: 190px

let menu = document.querySelector('.menuD');

window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        menu.classList.add('bottom');
    } else {
    	 menu.classList.remove('bottom');
    }
};

body {
  height: 800px;
}

.menuD {
  position: absolute;
  top: 190px;
}

.bottom {
  top: 590px;
}

<div class="menuD">Menu</div>

JSFiddle Demo