Javascript 固定侧栏上的滚动

我正在尝试向我的页面添加脚本，以便在用户到达侧栏底部时修复侧栏

我试图通过实现下面的脚本和CSS，将一个类添加到侧栏的容器中，以固定其位置：

脚本

 function fixeSideBar() {
    var myWindow = $( window ),
        mySideBar = $( ".widget-area" );

    myWindow.scroll ( function() {
            if ( myWindow.scrollTop() < 130 ) {
            mySideBar.removeClass( "sticks" );
        } else {
            mySideBar.addClass( "sticks");
        }
    } );
}

$(function() {
        fixeSideBar();
    } ); 

函数fixeSideBar（）{
var myWindow=$（窗口），
mySideBar=$（“.widget区域”）；
myWindow.scroll（函数（）{
if（myWindow.scrollTop（）<130）{
mySideBar.removeClass（“棍子”）；
}否则{
mySideBar.addClass（“sticks”）；
}
} );
}
$（函数（）{
fixeSideBar（）；
} ); 

CSS

.棍子{ 位置：固定； 顶部：-50px； 浮动：对； 左：1000px； 填充顶部：62px； 宽度：37%； 背景色：#fafafa； 右边填充：40px； 左侧填充：40px； }

然而，我面临两个主要问题：

通过添加这个新类，我丢失了侧栏的全部格式（包括它在屏幕右侧的位置）

整个格式仅在我的计算机上工作良好（具有特定的屏幕宽度和高度）

我希望最终完成的是在用户到达底部时（在任何类型的设备上）修复侧栏，并确保侧栏的格式保持不变。

试试这个

myWindow.scroll ( function() {
        if ( myWindow.scrollTop() <= mySideBar.offset().top +mySideBar.height() ) {
        mySideBar.removeClass( "sticks" );
    } else {
        mySideBar.addClass( "sticks");
    }
} );

myWindow.scroll（函数（）{
如果（myWindow.scrollTop（），首先不要使用top和left，使用bottom:50px和right:100px或任何适合设计的值，而不要硬编码left 1000px，它对较小的设备不起作用使用浏览器的开发工具查看它是否仍然保留“widget area”类。如果保留，请检查CSS（也可以从浏览器的开发工具中）查看是否有任何属性被新类重写