Question

我经常看到此UX，其中有一个浮动的侧边栏，它在滚动页面时向您显示目录中的位置。这是一个很好的例子：

https://www.ycombinator.com/rfs/

我偶尔为此找到了一些库（例如，在Semantic-UI中），但是我真正想要的是一种更轻量的方法，也许只是使用一些原始的javascript，以便我可以继续使用网站的资源/ CSS / etc。

如果重要，我的站点将使用ReactJS。

有关如何最好地实现此目标的任何指示？非常感谢！

Answer 1

这是我上面描述的方法的一个示例：

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>

使用浮动侧边栏创建目录

1 个答案: