我经常看到这个UX,其中有一个浮动的侧边栏,当您滚动页面时,它会显示您在目录中的位置。这是一个很好的例子:
https://www.ycombinator.com/rfs/
我偶尔会发现一些这样的库(例如在Semantic-UI中),但我真正想要的是一种轻量级的方法,也许只需要一些普通的javascript,这样我就可以继续使用我网站的资源/CSS/等。
如果重要的话,我的网站使用ReactJS。
关于如何最好地实现这一点,有什么建议吗?非常感谢!
发布于 2018-12-13 04:20:42
下面是我上面描述的方法的一个示例:
var scrollPos = window.scrollY,
fixedEle = document.querySelector('aside'),
fixedElePos = fixedEle.offsetTop;
window.addEventListener('scroll', function() {
scrollPos = window.scrollY;
if (scrollPos >= fixedElePos) {
fixedEle.classList.add('fixed');
} else {
fixedEle.classList.remove('fixed');
}
});
.container {
height:3000px;
padding-top:150px;
}
aside {
position:relative;
top:0;
}
aside.fixed {
position:fixed;
}
<div class="container">
<aside>
This element should be fixed on scroll
</aside>
</div>
https://stackoverflow.com/questions/53750200
复制相似问题