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

源代码:

/*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 页面太长滚动时,固定页面菜单标签,或者导航标签的位置,fixed/stickUp the position的更多相关文章

  1. 使用 jQuery.Pin 垂直滚动时固定导航

    ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击. jQuery Pin 借助jQuery的一个插件 jQue ...

  2. 定时器+echarts运行时间太长导致内存溢出页面崩溃

    最近做的项目需要在页面上展示echarts图表,且数据每隔10s刷新一次,然后发现时间长了以后chorme浏览器会显示页面崩溃.一开始以为是定时器的原因,试了网上的很多方法,比如把setInterva ...

  3. swiper内容滚动太长滚动Bug

    swiper内部有个横向滚动的盒子 由于swiper滚动,导致滚动盒子的时候自动跳到了下一页 wiper提供一个 noSwipingClass的属性,用来阻止自带的滚动事件 window.mySwip ...

  4. vue滚动行为控制——页面跳转返回上一个页面保留滚动位置

    需求分析: 一般这个功能在后台管理系统用的比较多,因为后台页面都是在当前页面打开,对于某些列表筛选页,如果列表数据比较多,页面就会滚动.当页面发生滚动,对列表数据进行查看或者编辑的时候,跳转到下一级页 ...

  5. 滚动页面时DIV到达顶部时固定在顶部

    本示例使用Javascript实现了滚动页面时,DIV到达顶部时固定在顶部.在IE下效果有点闪,效果网址:http://www.keleyi.com/keleyi/phtml/fixdiv.htm 下 ...

  6. 设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示;当页面滚动到起始位置时,头部div出现,底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  7. uniapp在在页面跳转时,若URL太长的字符串会导致数据传递失败

    url有长度限制,太长的字符串会传递失败,可使用窗体通信.全局变量,或encodeURIComponent等多种方式解决,如下为encodeURIComponent示例的解决方法. <navig ...

  8. JQuery弹出菜单时禁止页面(body)滚动

    最近在做手机端的弹出菜单,但是菜单弹出来后滑动手机屏幕的话页面滚动总是会将菜单滑上去,体验非常不好,所以查了一下弹出菜单时禁止页面滚动的方法,整理如下: 方法一:弹出菜单时给body和html添加一个 ...

  9. 使用 jQuery Ajax 在页面滚动时从服务器加载数据

    简介 文本将演示怎么在滚动滚动条时从服务器端下载数据.用AJAX技术从服务器端加载数据有助于改善任何web应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用 ...

随机推荐

  1. 获取Portal中POWL程序的APPLID

    获取Portal中POWL程序的APPLID 今天做练习的时候跟 Leader 学了一招,当不知道集成在 Portal 中 POWL 程序的 APPLID 的时候,可以在类 CL_POWL_MODEL ...

  2. json-smart 使用示例

    json-smart 使用示例 json是一种通用的数据格式.相比与protocal buffer.thrift等数据格式,json具有可读性强(文本).天生具备良好的扩展性(随意增减字段)等优良特点 ...

  3. ACM 位运算

    的幂 boolean power2(int x) { return((x&(x-1))==0)&&(x!=0): } For example: #include<stdi ...

  4. TOGAF架构开发方法(ADM)之架构变更管理阶段

    TOGAF架构开发方法(ADM)之架构变更管理阶段 1.10 架构变更管理(Architecture Change Management) 企业架构开发方法各阶段——架构变更管理 1.10.1 目标 ...

  5. Call U

    Communication - 02.Call U App层 从大拇哥Click CallButton开始手机便已明白,主人这是要打电话.当然,你可以选择直接拨号,也可以通过ContactList,或 ...

  6. VMware vSphere 服务器虚拟化之二十四 桌面虚拟化之手动池管理物理机

    VMware vSphere 服务器虚拟化之二十四 桌面虚拟化之手动池管理物理机 VMwareView手动池可以管理物理计算机 说明: 环境基于实验二十三 1.准备一台Windows 7的物理计算机名 ...

  7. spark单机部署及样例运行

    spark单机运行部署 环境预装 需要预先下载jdk和spark.机器使用centos6.6(推荐).然后依次运行 [root@spark-master root]# cd /root #安装必要的软 ...

  8. [ios2]ios RSA

    http://blog.iamzsx.me/show.html?id=155002 http://www.theosoft.net/ http://blog.sina.com.cn/s/blog_5f ...

  9. [asp.net] 利用WebClient上传图片到远程服务

    一.客户端 1.页面 1 <form id="Form1" method="post" runat="server" enctype= ...

  10. DPDK support for vhost-user

    转载:http://blog.csdn.net/quqi99/article/details/47321023 X86体系早期没有在硬件设计上对虚拟化提供支持,因此虚拟化完全通过软件实现.一个典型的做 ...