边栏滚动固定

本文介绍了一种利用JavaScript实现的侧栏随滚动条位置变化而固定的方法。通过监听滚动事件来调整侧栏的位置属性,使其在特定条件下变为固定状态,避免了在小屏幕设备上与底部内容重叠的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


这个函数要配合 css 使用;先在div 中设置好top 和bottom 的值;


scroll_on:function(div){

            var top = $(div).offset().top;

            $(window).scroll(function(){

                var scrolltop = $(window).scrollTop();

                if(top-scrolltop-97<0){

                    $(div).css({

                        'position':'fixed'

                    })

                }else{

                    $(div).css({

                        'position':'static'

                    })

                }

            })

        },




边栏固定,当被固定内容高度比一些小屏幕电脑屏幕更大时,容易出现,固定栏跟底部内容重叠的状况;


 

这个时候,要先判断总内容是否大于可是高度。大于的话,就边栏固定,并在底部出现的时候,把边栏position回到文档,让底部可以“”顶“”边栏上去;




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值