固定侧边栏滚动答案

【问题标题】：Fixed side bar on scroll固定侧边栏滚动
【发布时间】：2015-09-23 02:30:59
【问题描述】：

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

我试图通过实现下面的脚本和 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；浮动：对；左：1000px；填充顶部：62px；宽度：37%；背景颜色：#fafafa； padding-right: 40px; 填充左：40px； }

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

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

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

【问题讨论】：

首先不要使用 top 和 left ，而是使用 bottom:50px 和 right:100px 或任何适合设计的值，而不是硬编码 left 1000px 它不适用于较小的设备
使用浏览器的开发者工具查看它是否仍然拥有“widget-area”类。如果是的话，然后检查 CSS（也来自浏览器的开发者工具）看是否有任何属性被新类覆盖

标签： javascript css sidebar

【解决方案1】：

试试这个

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

如果您希望在到达该 div 的底部时修复该侧边栏，则添加 meSideBar.height() 条件，如果您希望在显示 div 时修复侧边栏，请将其删除

【讨论】：