滚动条上的固定侧栏

debugcn 发表于 Dev

泰迪熊

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

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

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

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

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

桑耶夫

尝试这个

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。