首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用浮动侧边栏创建目录

使用浮动侧边栏创建目录
EN

Stack Overflow用户
提问于 2018-12-13 03:37:02
回答 1查看 675关注 0票数 1

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

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

我偶尔会发现一些这样的库(例如在Semantic-UI中),但我真正想要的是一种轻量级的方法,也许只需要一些普通的javascript,这样我就可以继续使用我网站的资源/CSS/等。

如果重要的话,我的网站使用ReactJS。

关于如何最好地实现这一点,有什么建议吗?非常感谢!

EN

回答 1

Stack Overflow用户

发布于 2018-12-13 04:20:42

下面是我上面描述的方法的一个示例:

代码语言:javascript
复制
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');
  }
});
代码语言:javascript
复制
.container {
  height:3000px;
  padding-top:150px;
}
aside {
  position:relative;
  top:0;
}
  aside.fixed {
    position:fixed;
  }
代码语言:javascript
复制
<div class="container">
  <aside>
    This element should be fixed on scroll
  </aside>
</div>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53750200

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档