javascript - 当用户位于页面底部时编辑 css 值

Question

我实际上有一个粘性菜单，它跟随这个 css 的滚动:

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

问题是当用户位于页面顶部时我希望他处于这个位置(以将其与其他文本对齐)但我希望菜单位于

top: 590px

当用户位于页面底部时。你知道怎么做吗？我想我需要 JS ...

实际上，菜单会变高(因为距离顶部只有 190px)

谢谢

Answer 1

你可以计算你是否在有滚动的页面底部。

这是一个纯javascript的解决方案

然后使用 classList 添加一个类到 div，它定义了新的 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