鉴于Dount这个模板的首页是属于两栏的首页形式，所以之前也有从网上寻找过类似的方法，但是都没有实现。今天偶然去看博客的时候发现有小伙伴转载了这个文章，然后就顺藤摸瓜的找到了原文，跟着原文的提示就折腾出来了，下面记录下手札。 常用的CDN引用安装JQuery：

侧边栏滚动结束时固定设定模块

利用这串代码，可以自动获取侧边栏高度，当侧边栏滚动结束后，设定的模块激活并固定在屏幕中，IE6无效。 默认支持两个模块，如果需要增加模块要在第二行添加变量并参照第8行的代码为新变量添加启动的参数。

jQuery(document).ready(function (a) {
        var c = 1,d = 2; //这里设定的是第1和第2
        a.browser.msie && 6 == a.browser.version && !a.support.style || (
        e = a("#sidebar").width(), f = a("#sidebar .widget"), g = f.length, g >= (c > 0) && g >= (d > 0) && a(window).scroll(function () {
                        var b = document.documentElement.scrollTop + document.body.scrollTop;
                        b > f.eq(g - 1).offset().top + f.eq(g - 1).height() ? 0 == a(".roller").length ? (f.parent().append('
'),
                        f.eq(c - 1).clone().appendTo(".roller"),
                        c !== d && f.eq(d - 1).clone().appendTo(".roller"),
                        a(".roller").css({
                                position: "fixed",
                                top: 50,
                                zIndex: 0,
                                width: 250
                        }), a(".roller").width(e)) : a(".roller").fadeIn(300) : a(".roller").fadeOut(300)
         }))
});

当滚动到指定模块时置顶该模块

下面这串代码适合侧边栏较长的用户，如有JavaScript加载的模块高度会判断出错，建议侧边栏没有JavaScript模块的用户使用。 当滚到#suggested 时置顶该模块，可以按自己的需要修改。

jQuery(document).ready(function($) {
    $.fn.smartFloat = function() {
        var position = function(element) {
            var top = element.position().top,
            pos = element.css(“position”);
            $(window).scroll(function() {
                var scrolls = $(this).scrollTop();
                if (scrolls > top) {
                    if (window.XMLHttpRequest) {
                        element.css({
                            position: “fixed”,
                            top: 0
                        });
                    } else {
                        element.css({
                            top: scrolls
                        });
                    }
                } else {
                    element.css({
                        position: “absolute”,
                        top: top
                    });
                }
            });
        };
        return $(this).each(function() {
            position($(this));
        });
    };
    //绑定,将引号中的内容替换成你想要下拉的模块的ID或者CLASS名字,如”#ABC”,“.ABC”
    $(“#suggested”).smartFloat();
});

滚动到一定像素后固定显示

类似于当滚动到指定模块时置顶该模块，不同之处是设定固定的高度，卷动到该高度时显示置顶的模块。

默认给出的是卷动368像素后侧边栏#sidebar 整体跟随滑动,适合侧边栏少的网站。

var documentHeight = 0;
var topPadding = 15;
$(function() {
    var offset = $("#sidebar").offset();
    documentHeight = $(document).height();
    $(window).scroll(function() {
        var sideBarHeight = $("#sidebar").height();
        if ($(window).scrollTop() > offset.top) {
            var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
            var maxPosition = documentHeight - (sideBarHeight + 368);
            if (newPosition > maxPosition) {
                newPosition = maxPosition;
            }
            $("#sidebar").stop().animate({
                marginTop: newPosition
            });
        } else {
            $("#sidebar").stop().animate({
                marginTop: 0
            });
        };
    });
});

方法来自：@WP酷

由于以上方法并不适配通用，所以贴上下面的通用代码。

 我是个腼腆羞涩的浮动层… 


$.fn.smartFloat = function() {
    var position = function(element) {
        var top = element.position().top, pos = element.css("position");
        $(window).scroll(function() {
            var scrolls = $(this).scrollTop();
            if (scrolls > top) {
                if (window.XMLHttpRequest) {
                    element.css({
                        position: "fixed",
                        top: 0
                    }); 
                } else {
                    element.css({
                        top: scrolls
                    }); 
                }
            }else {
                element.css({
                    position: pos,
                    top: top
                }); 
            }
        });
};
    return $(this).each(function() {
        position($(this));                       
    });
};
//绑定
$("#float").smartFloat();