0

你可能都知道 medium.com，如果不去看看，它确实是阅读精美文章的好来源。

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

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

我想用 CSS 和纯 javascript 重新创建这种效果，有人可以帮我吗？

我快速浏览了他们的来源，幸运的是没有完全被阻挡，当侧边栏到达其内容的底部时，他们似乎设置了一个数据元素。但我还没有运气在 javascript 中重新创建整个效果。

4

1 回答 1

2

I personally recommend using the Sticky-Kit jQuery plugin. It's lightweight, free, and easy to use.

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

If you prefer a CSS only solution, you could do something like this: 

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

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

Take a look at this example: http://css-tricks.com/examples/ScrollingSidebar/css.php

于 2015-01-21T20:36:30.583 回答