jquery浮动左栏答案

【问题标题】：jquery floating left barjquery浮动左栏
【发布时间】：2015-12-02 22:55:51
【问题描述】：

我正在尝试复制以下位于左侧的社交栏：

（栏向左浮动，从不滚动到屏幕外）

但是，当我将源下载到该网页时，我注意到他正在使用他正在使用 Sizzle.js。有谁知道使用 jquery 实现这一目标的方法。最好不使用 jQuery 插件。

我意识到我可以只使用 CSS 左侧的固定栏，但是我有点想要当我滚动过去时它抓住顶部的感觉。

【问题讨论】：

【解决方案1】：

var name                = "#rightsidebar";
var menu_top_limit      = 241;
var menu_top_margin     = 20;
var menu_shift_duration = 500;
var menuYloc = null;
///////////////////////////////////

$(window).scroll(function() 
{ 
    // Calculate the top offset, adding a limit
    offset = menuYloc + $(document).scrollTop() + menu_top_margin;

    // Limit the offset to 241 pixels...
    // This keeps the menu out of our header area:
    if(offset < menu_top_limit)
        offset = menu_top_limit;

    // Give it the PX for pixels:
    offset += "px";

    // Animate:
    $(name).animate({top:offset},{duration:menu_shift_duration,queue:false});
});

其实这段代码是already there in SO

【讨论】：

【解决方案2】：

您不必为此使用 jQuery。您可以使用简单的 HTML 和 CSS - 使用 CSS3 的属性 position:fixed。请参阅this article 了解更多信息。

【讨论】：