javascript - 类似Medium.com的两栏“粘性”滚动

Question

Closed. This question needs to be more focused。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？更新问题，使其仅通过 editing this post专注于一个问题。
                        
                        4年前关闭。
                                                                                            
                
        
你们可能都知道medium.com，如果不检查的话，它确实是阅读精美文章的绝佳来源。

最近，他们更改了设计，现在主页具有此两列的布局。

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

我想在CSS和纯JavaScript中重新创建这种效果，有人可以在这里帮我吗？

我快速浏览了一下它们的来源，幸运的是，这些来源并没有完全被阻止，并且当补充工具栏到达其内容的底部时，它们似乎设置了一个数据元素。但是我还没有运气，无法在javascript中重新创建整个效果。

最佳答案

我个人建议使用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

关于javascript - 类似Medium.com的两栏“粘性”滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28076242/

上一篇：css - 如何使线性渐变不重复

下一篇：html - 如何为 HTML 背景选择正确的图像大小？

相关文章：

css - 文本旁边的图像填充

javascript - 一个纯 CSS 文本链接到视频 slider

javascript - 想一次性多处变色!

javascript - YouTube 自动播放并静音

javascript - 在找到最长的单词之前拆分字符串

javascript - 使用 JSON 传递对象

html - 没有绝对位置的div中div的绝对位置

javascript - Vue中使用SSR时在何处调用 "Vue.use(plugin)"

html - 如何在用户使用 CSS 将鼠标悬停在 HTML 页面上之前隐藏图像？

python - 如何生成随机的html文件

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