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

  • 相关阅读:
    day14_集合框架1(ArrayList,LinkedList,HashSet)
    day13_String、StringBuffer、StringBuilder
    初识Java_day01
    关于局部内部类访问带有final修饰符的局部变量
    day03,day04_数组,循环(上)
    day09(下)_异常(上)
    day08_多态
    day11_多线程(多线程安全问题)
    day16_集合框架3(HashMap,TreeMap)
    day09(上)_内部类
  • 原文地址:https://www.cnblogs.com/sgciviolence/p/5529998.html
Copyright © 2020-2023  润新知