JavaScript仿淘宝实现固定右侧侧边栏

1、原先的侧边栏是绝对定位

2、当页面滚动到一定位置后，侧边栏为固定定位

3、页面继续滚动，会上返回顶部显示出来

问题：滚动一定位置，包含内容的盒子.scrollwidth;但要求是浏览器的滚动条

1、需要用到页面滚动事件scroll，因为是页面滚动，所以事件源是docume教师职称评定表nt

当滚到到banner时，盒子就变为固定定位

2、页面被卷去的头部：可以通过window.pageyofft来获得，如果是被卷曲的左侧window.pagexofft (原来问题出在了这里）

3、注意：元素被卷去的头部是element.scrolltop,如果是页面被卷去的头部则是window.pag空饷eyofft

妙啊，对原来的程序做出修改：

就可以实现了。只是忘记了盒子改为固定定位

fixed：固定定位：元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewpor箭字开头的成语t）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。

使用粘性定位，对slider进行处理，这样就不需要判断滚动距离，来对slider的定位进行修改。而是页面一滚动就设置slider的position属性为粘性定位，当他到达距离页面顶部一定距离后，就固定在页面的某个位置。可以达到相同的效果

sticky：粘性定位。元素在跨越特定阈值前为相对定位师说教案，之后为固定定位

在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚罗城中学到阈值以下。

缺点就是兼容性差，当时课上说了解，就没怎么使用。确实比用js写要方便很多

使用粘性定位实现。但是不知道第一种是怎么实现的。两个dt间隔一定距离后，上面那个dt就取消粘性定位

以上就是javascript仿淘宝实现固定右侧侧边栏的详细内容，更多关于javascript固定侧边栏的资料请关注www.887551.com其它相关文章！