html 页面太长滚动时,固定页面菜单标签,或者导航标签的位置,fixed/stickUp the position

有时你曾经需要把页面上的某些东西当页面太长发滚动的时候保留置顶位置显示,或许你有别的实现方式,我这个仅供参考,

源代码:

/*global $, jQuery, alert*/
(function ($) {
    'use strict';
    $.fn.stickUp = function (option) {
        var self, originaltop, originalleft, outw, oldp, oldf, outh, createId;
        originaltop = $(this).offset().top;
        originalleft = $(this).offset().left;
        outw = $(this).outerWidth();
        oldp = $(this).css("position");
        oldf = $(this).css("float");
        outh = $(this).outerHeight();

        //createId = "stick" + (1 + Math.floor(Math.random() * 9999999999));
        var replaceDiv = $("<div/>", {                           
                            css: {
                                 outw,
                                height: outh,
                                position: oldp,
                                float: oldf
                            }
                        });

        self = this;
        $(window).scroll(function () {
            if ($(self).css("position") !== "fixed") {
                if ($(self).offset().top <= $(window).scrollTop()) {
                    $(self).outerWidth(outw);
                    $(self).css({
                        position: "fixed",
                        top: 0,
                        left: originalleft
                    });
                    $(self).after(replaceDiv);
                }
            } else {
                if (originaltop > $(window).scrollTop()) {
                    $(self).css({
                        position: oldp
                    });

                    $(replaceDiv).remove();
                }
            }
        });
    };
}(jQuery));

页面上插入以下的脚本:

 $(function(){
      $(".left-menu").stickUp(); // the target that you want to stickup.
  });

 经个人测试,感觉比https://github.com/LiranCohen/stickUp/blob/master/stickUp.js 好用。

原文地址:https://www.cnblogs.com/sgciviolence/p/5529998.html