短侧边栏和长内容的匹配
问题:
在写网页的过程中遇到侧边栏和较长的内容不匹配的问题,由于内容较长而侧边栏较短会导致滑动过程中,浏览器滚动条滑到后面,页面只剩下内容模块,而侧边栏则已经到尽头。
解决方案:
利用滚动条事件
定义:当用户滚动指定的元素时,会发生 scroll 事件。
scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。
scroll() 方法触发 scroll 事件,或规定当发生 scroll 事件时运行的函数。
通过给浏览器加滚动条事件
$(window).scroll(function() { }
获取页面滚动条的具体值:
$(document).scrollTop(
)
具体实现
$(window).scroll(function () {
var scrollH=$(document).scrollTop();
if(scrollH<800)/*选择正常滑动的距离*/
{
$(".content_right").css({position:"static"});
}
else if(scrollH>800&scrollH<2000)/*在哪一个长度段停留*/
{
$(".content_right").css({position:"fixed",left:"975px",top:"-600px",bottom:"auto"});
}
if(scrollH>2000)/*这里是将整个的侧边栏部分整体向下移动到接近底部的位置视觉上是侧边栏继续往下走了*/
{
$(".content_right").css({position:"absolute",left:"975px",top:"1400px"});
}
})