• 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 好用。

  • 相关阅读:
    洛谷P2045 K方格取数(算竞进阶习题)
    洛谷P2764 最小路径覆盖问题
    BZOJ 1051 受欢迎的牛
    BZOJ 4196 软件包管理器
    跨域知识(一)——CORS
    CSS 实现隐藏滚动条同时又可以滚动
    数组map用法总结
    js和Jquery获取选中select值和文本
    closest和parents方法区别
    CSS面试题总结2(转)
  • 原文地址:https://www.cnblogs.com/sgciviolence/p/5529998.html
Copyright © 2020-2023  润新知