當滾動到指定模塊時置頂該模塊

下面這串代碼適合側邊欄較長的用戶,如有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();
});


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章