首页 > 其他 > 详细

固定边栏滚动

时间:2017-01-22 13:41:44      阅读:136      评论:0      收藏:0      [点我收藏+]

 

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

(1)使用JQ固定侧边栏

技术分享

(2)使用JS固定侧边栏

获取屏幕滚动的高度:技术分享

获取窗口的高度:技术分享

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

技术分享

获取ID

技术分享

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

技术分享

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

技术分享

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

技术分享

 

固定边栏滚动

原文:http://www.cnblogs.com/D-Y-W/p/6339854.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!