html左侧导航滑动网页定位效果源码,JS网页侧边栏随网页滚动悬浮定位效果

JS网页侧边栏随网页滚动悬浮定位效果

发布时间：2015-12-02 09:09:32

作者：佚名

阅读：(279)

相信大家见过很多很多wordpress博客都会有个侧边栏滚动定位效果，今天就给大家分享一个，闲话就不多说了，直接上代码：

当拖动滚动条到第1个临界值时，一固定区域块以随页面滚动而一直显示在页面一固定的视觉区域;

当拖动滚动条到第2个临界值时,这一固定区域块以“固定位置”的形式钉在页面上显示;

当页面滚动条回到页面顶部时，这一固定区域块又恢复正常的显示状态！

.w1 {

width: 600px;

margin: 0 auto;

position: relative;

}

.header {

height: 150px;

background: #9FF;

}

.main {

height: 1000px;

background: #9F6;

}

.footer {

height: 300px;

background: #06C;

}

.sideBar {

width: 200px;

height: 680px;

background: #f00;

float: right;

}

.sideBar span {

position: absolute;

left: 0;<