本文介绍如何使用Elementor制作部粘性侧边栏，我会通过一个实际的案例来介绍如何在页面中制作和实现粘性侧边栏的效果。
本文基于Elementor的Containner制作，如果你还在使用老板的Section需要将插件升级到最新版本并开启Containner功能。关于Elementor Containner的详细教程你可以阅读我写的文章《Elementor Containner超详细讲解教程》
本站提供Elementor Pro官方正版授权，如有需要可通过页脚二维码联系购买。
这里我用demo002中的产品列表页面作为案例进行讲解和说明。设置页面中左边的侧边栏在页面向下滑动时黏在顶部位置，并且设置一旦产品列表滑动到底部，继续向下滑动时，侧边栏不再固定在顶部。
所以，案例中粘性侧边栏有2个特点，一个是向下滑动产品列表时，侧边栏黏在页面顶部，用户始终可以看到侧边栏；另外一个是，用户浏览完产品列想要继续向下滑动页面时，侧边栏不在黏在顶部，用户可以继续向下阅读页面内容。
了解这两个特点之后，让我们从头到尾来实现一下：
如果不想看图文，客户滑动到文章末尾看视频教程
1、创建一个侧边栏Containner
创建一个侧边栏Containner用于堆放侧边栏需要的内容，比如搜索框、产品分类、询盘表单等等你想放在侧边栏中的内容。
不建议在侧边栏Containner中放太多内容，大概排列一屏的高度差不多。
在创建侧边栏Containner之前，建议先创建一个页面结构Containner，通过Flexbox添加一个布局结构。
然后拖拽Containner元素到页面布局Containner左侧，用于排放侧边栏需要布局的内容和元素。
然后可以向这个Containner中添加你要放在侧边栏中的内容。
2、向侧边栏Containner中添加元素
添加好侧边栏Containner之后，你可以向Containner添加你需要放在侧边栏中的元素，比如搜索框、产品分类、询盘表单等等。
添加好侧边栏Containner之后，你可以向Containner添加你需要放在侧边栏中的元素，比如搜索框、产品分类、询盘表单等等。
添加好侧边栏内容如下：
侧边栏右边的内容跟你的需求添加即可，这里我不在做说明。
3、设置侧边栏Containner粘性效果
选中侧边栏的Containner，让后进入Containner的Advanced设置选项卡。（注意如果你想要整个侧边栏都有粘性效果，就要选中Containner）
打开Motion Efficts菜单。
设置Sticky为Top，Sticky On设置在哪些终端生效粘性效果。一般情况下手机端我不会设置粘性效果。
设置Offset为120像素（这个选项代表粘性页面生效时和顶部保持的距离，如果你设置了粘性页眉，那么建议高度要大于粘性页眉的告诉，都则粘性侧边栏会遮挡粘性页眉的内容）。
Effects Offset设为0或者1，代表基于Offset设置的值向上偏移多少像素之后粘性页面生效，一般数值越小生效越早。
Stay In Colum设为Yes，代表粘性侧边栏只在包裹它的上一级Containner生效，一旦用户滑动过了上级Containner之后，粘性效果将不再生效，用户可以继续阅读下面的内容。
设置完成之后保存或者更新可以看到实际的效果。
视频教程
