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

源代码:

/*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. 鸟哥的LINUX私房菜基础篇第三版 阅读笔记 三 Linux磁盘与文件系统管理

    一.认识EXT2文件系统:     a.硬盘的组成:转动小马达+存储的磁盘+读写的机械臂     b.磁盘的一些概念              扇区为最小的物理储存单位,每个扇区为512B       ...

  2. POJ 1873 The Fortified Forest

    题意:是有n棵树,每棵的坐标,价值和长度已知,要砍掉若干根,用他们围住其他树,问损失价值最小的情况下又要长度足够围住其他树,砍掉哪些树.. 思路:先求要砍掉的哪些树,在求剩下的树求凸包,在判是否可行. ...

  3. Java的23种设计模式

    1.FACTORY—追MM少不了请吃饭了,麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西,虽然口味有所不同,但不管你带MM去麦当劳或肯 德基,只管向服务员说“来四个鸡翅”就行了.麦当劳和肯德基就是生产鸡 ...

  4. 快速构建C++项目工具Scons,结合Editplus搭建开发环境

    Windows下C++开发工具用的最多的非VS莫属了(当然也有很多比如eclipse,Qt等等),便捷的项目构建向导,再加上强大的VC助手,使得开发和调试得心应手.并不是说vc就没有缺点,相反缺点也不 ...

  5. flask 真是太棒啦,阅读手册后就能做出一个博客了

    真是很好的东西,有很多有益处的东西. 有template引擎, 有flask自己带的g (用来处理访问与数据库打开关闭的) 有flask自己的处理session的功能 自带的jinja2模板引擎也是比 ...

  6. angularJS自定义 过滤器基础

    先写个简单的例子,该过滤器是指定规定的字符串长度: html: <div ng-app="app" ng-controller="ctrl"> &l ...

  7. [转]Ubuntu10下MySQL搭建Amoeba系列(文章索引)

    一.前言(Introduction) 使用了Amoeba有一段时间了,发现官方博客:Amoeba使用指南有很多地方都是错误的,在我实战中给到一些错误的指示,所以我想写些在搭建的实战中给大家一点指引.欢 ...

  8. 数据库(MySQL)表基本操作

                                    数据库表基本操作 思前想后,最终还是把博客的名字改成了数据库表基本操作,以前叫SQL语句大全,感觉用"大全"这个名词 ...

  9. Windows卸载软件出现蓝屏SYSTEM SERVICE EXCEPTION(VrvProtect_x64_2.sys)

    今天给大家介绍一个卸载Windows上软件的工具Windows Installer Clean Up,可以卸载电脑上的很多控制面板里面卸载不掉的软件,或者卸载过程中出现问题的软件. (1)出现的现象: ...

  10. docker--------------实践(转载)

    在私有云的容器化过程中,我们并不是白手起家开始的.而是接入了公司已经运行了多年的多个系统,包括自动编译打包,自动部署,日志监控,服务治理等等系统.在容器化之前,基础设施主要以物理机和虚拟机为主.因此, ...