Question

你们可能都知道medium.com，如果没有查看它，它真的是阅读精美文章的一个很好的来源。

最近他们改变了设计，主页现在采用了这两个列布局。

主要内容和侧边栏（显然）有不同的高度，现在这里很酷的效果是侧边栏滚动页面直到它到达其内容的底部然后在滚动其余部分时继续保持在此位置页。

我想在CSS和普通javascript中重新创建这种效果，有人可以帮助我吗？

我快速浏览了他们的消息来源，幸运的是并没有完全受阻，他们似乎在侧边栏到达其内容的底部时设置了数据元素。但是我没有运气在javascript中重现整个效果。

Answer 1

我个人建议使用Sticky-Kit jQuery插件。它轻巧，免费且易于使用。

http://leafo.net/sticky-kit/

如果您更喜欢仅限CSS的解决方案，您可以执行以下操作：

#page-wrap { 
  width: 600px; 
  margin: 15px auto; 
  position: relative; 
}

#sidebar { 
  width: 190px; 
  position: fixed; 
  margin-left: 410px; 
}

看一下这个例子：http://css-tricks.com/examples/ScrollingSidebar/css.php

Medium.com-like two column＆＃34; sticky＆＃34;滚动

1 个答案: