滾動時固定側欄

我正在嘗試將腳本添加到我的頁面，以便在用戶到達底部時修復側欄。滾動時固定側欄

我試圖將類添加到我的側欄的容器通過執行腳本和下面的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 { position：fixed; top：-50px; float：right; left：1000px; padding-top：62px; 寬度：37％; background-color：#fafafa; padding-right：40px; padding-left：40px; }

不過，我面臨兩個主要問題：

通過增加這個新的類，我失去了我的側欄的整個格式（包括其在屏幕的右側位置）。
整個格式只能在我的電腦上（具有特定的屏幕寬度和高度）正常工作。

我想什麼，最終實現將是當用戶到達其下（在任何類型的設備）以固定側邊欄，並確保我的側邊欄的格式保持不變。

來源

2015-07-06 Teddy

首先，而不是使用頂部和左側，使用底部：50px和右側：100px或適合設計的任何值，而不是硬編碼左1000px它不適用於較小的設備 –

使用瀏覽器的開發人員工具看看它是否仍然擁有「widget-area」類。如果它確實存在，那麼檢查CSS（也來自瀏覽器的開發者工具）以查看是否t這裏是新課程覆蓋的任何屬性 –

試試這個

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

如果你想，當達到該分區的底部，你在條件添加meSideBar.height（）被固定的側邊欄，如果你想補充工具欄是固定的，就像所示DIV刪除它

來源

2015-07-06 03:55:04

滾動時固定側欄

回答

相關問題