短侧边栏和长内容的匹配

短侧边栏和长内容的匹配

问题:

在写网页的过程中遇到侧边栏和较长的内容不匹配的问题,由于内容较长而侧边栏较短会导致滑动过程中,浏览器滚动条滑到后面,页面只剩下内容模块,而侧边栏则已经到尽头。

解决方案:

利用滚动条事件
定义:当用户滚动指定的元素时,会发生 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"});
    }

})
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值