固定侧边栏滚动

Question

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

我试图通过执行脚本和下面的 CSS 将 class 添加到我的边栏容器中以固定其位置：

脚本

 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; left:1000px; 填充顶部：62px； width:37%；背景色：#fafafa；填充右：40px；左填充：40px； }

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

通过添加这个新的 class，我失去了侧边栏的整个格式（包括它在屏幕右侧的位置）。
整个格式只在我的电脑上工作正常（具有特定的屏幕宽度和高度）。

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

Answer 1

试试这个

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

如果您希望在到达 div 底部时固定侧边栏，请在条件中添加 meSideBar.height() 并且如果您希望侧边栏像 div 一样固定显示删除它

固定侧边栏滚动

Fixed side bar on scroll

javascript

css

sidebar