滚动条上的固定侧栏

Question

我试图将脚本添加到我的页面上，以在用户到达底部时修复我的侧边栏。

我尝试通过实现以下脚本和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();
    } ); 

的CSS

.sticks {位置：固定； 上：-50px; float：right; 左：1000px; padding-top：62px; 宽度：37％; 背景颜色：#fafafa; padding-right：40像素； padding-left：40px; }

但是，我面临两个主要问题：

1. 通过添加此新类，我丢失了侧边栏的全部格式（包括其在屏幕右侧的位置）。

2. 整个格式只能在我的计算机上正常工作（具有特定的屏幕宽度和高度）。

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

Answer 1

尝试这个

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

如果要在达到该div的底部时固定该侧边栏，请在条件中添加meSideBar.height（），如果要像显示div一样固定侧边栏，请将其删除。