css - CSS 和篮子：如何做一个“始终可见”的篮子？

Question

在这个网站上，如果你尝试任何一家餐厅，你会看到一个总是在右侧可见的篮子，如果你向下滚动，它就是“神奇的”：它像“粘性”一样停留在屏幕顶部。http://takeaway.com

他们是怎么做到的，你有什么好的网站/教程来做这些事情（我不知道谷歌实际上是什么！）？

Answer 1

当浏览器滚动超过某个点时，以下 CSS 将应用于购物篮：

position: fixed; top: 0px;

您可以使用 jQuery 插件（如 Waypoints）相当轻松地做到这一点，它具有创建“粘性”元素的特殊功能。

获取插件并在此处查看教程：http: //imakewebthings.com/jquery-waypoints/

请参阅此处的示例：http: //imakewebthings.com/jquery-waypoints/sticky-elements/

Answer 2

你想要我在我的项目中所做的，看看我们在购物车中使用了类似的东西的项目。我们使用了下面的css关键点是Position和z-index

#your wrapper{
    margin:0 0 14px 0px;
    /*margin: 30px auto;*/
}
.sticky{
    position: fixed;
    bottom:-30px;
    width:74%;
    left:13%;
    z-index: 100;
}