滾動條上的固定側欄

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一樣固定側邊欄，請將其刪除。