当用户位于页面底部时，编辑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