html 页面太长滚动时,固定页面菜单标签,或者导航标签的位置,fixed/stickUp the position
2016-05-26 10:09
579 查看
有时你曾经需要把页面上的某些东西当页面太长发滚动的时候保留置顶位置显示,或许你有别的实现方式,我这个仅供参考,
源代码:
页面上插入以下的脚本:
经个人测试,感觉比https://github.com/LiranCohen/stickUp/blob/master/stickUp.js 好用。
源代码:
/*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: { width: 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 好用。
相关文章推荐
- html中的换行符也占空间,如何解决
- C#清除HTML标签方法汇总
- HTML文档设置标记
- 手机或html中图片上传按钮不显示的解决办法!
- HTML事件默认行为与事件传播
- html图片和文字的细节
- 轻量web服务器开发日记04-buffile结构体的实现
- html基础
- html 图像映射
- XHTML标签的嵌套规则分析
- HTML获取触发事件的元素id
- [Flex] IFrame系列 —— 在flex的web应用中嵌入html的方法
- html滚动字幕代码(咋个办呢 zgbn )
- html_博客博主
- 如何选择Html.RenderPartial和Html.RenderAction
- html中路径问题
- 给html超链接设置事件不使用href来完成跳
- HTml传递参数
- HTML2
- sikuli自动化测试html报告输出