jquery css 实现网页下滑时，某个div保持页面为止不动

最近在学seo，发现很多网站中都有这种的，页面下拉时某个div保持在页面的位置不动的效果，实现起来其实很简单，这边我们记录一下简单的代码

jquery方法定义

    $.fn.smartFloat = function () {
        var position = function (element) {
            console.log(element);
            var top = element.position().top, pos = element.css("position");
            $(window).scroll(function () {
                var scrolls = $(this).scrollTop();
                if ((scrolls - 30) > top) {
                    if (window.XMLHttpRequest) {
                        element.css({
                            position: "fixed",
                            top: 0,
                            width: "100%",
                            "background-color": "#FFF",
                            "z-index": 1
                        });
                    } else {
                        element.css({
                            top: scrolls
                        });
                    }
                } else {
                    element.css({
                        position: pos,
                        top: top
                    });
                }
            });
        };
        return $(this).each(function () {
            position($(this));
        });
    };

调用方法

$(".post-view-ranking-wrap").smartFloat();