有时你曾经需要把页面上的某些东西当页面太长发滚动的时候保留置顶位置显示,或许你有别的实现方式,我这个仅供参考,
源代码:
/*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 好用。