css和篮子：如何做一个“永远可见”的篮子？

Question

在这个网站上，如果你尝试任何一家餐馆，你会看到一个总是在右边可见的篮子，如果你向下滚动，那么它就是“神奇的”：它在顶部保持“粘性”状态屏幕。 http://takeaway.com

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

Answer 1

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

position: fixed; top: 0px;

你可以使用像Waypoints这样的jQuery插件轻松地做到这一点，它具有创建“粘性”元素的特殊功能。

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

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

Answer 2

您希望我在项目中完成的工作看看project我们在购物车中使用了类似的东西。我们使用了以下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;
}