固定边栏滚动

 

在越来越多的电商网站中，商品的显示尤为重要，我们在滚动页面的时候，如果中间主体部分和侧边的高度相差很大，那么同时滚动的话侧边栏可能会出现大量的空白，为了提高用户的体验，在这里，我主要采取的定位的方法，

（1）使用JQ固定侧边栏

（2）使用JS固定侧边栏

获取屏幕滚动的高度：

获取窗口的高度：

在使用js时，我们必须考虑到不同浏览器的事件绑定机制，主要分为主流浏览器和IE浏览器，IE使用attchEvent,主流浏览器使用addEventListener,封装函数如下：

获取ID

判断的函数scrollEvent主要就是临界值的判断;

在这里使用了cssText，主要就是为了避免多次操作，cssText只需要一次reflow，提高了页面的渲染性能，但是这样写有一个问题，就是下次在使用cssText的时候会把上一次的样式给清空，所以，我们需要采用叠加的方式以保留原有的样式。

最终的调用结果就是如图所示：

 

转载于:https://www.cnblogs.com/D-Y-W/p/6339854.html