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: {
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的更多相关文章
- 使用 jQuery.Pin 垂直滚动时固定导航
ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击. jQuery Pin 借助jQuery的一个插件 jQue ...
- 定时器+echarts运行时间太长导致内存溢出页面崩溃
最近做的项目需要在页面上展示echarts图表,且数据每隔10s刷新一次,然后发现时间长了以后chorme浏览器会显示页面崩溃.一开始以为是定时器的原因,试了网上的很多方法,比如把setInterva ...
- swiper内容滚动太长滚动Bug
swiper内部有个横向滚动的盒子 由于swiper滚动,导致滚动盒子的时候自动跳到了下一页 wiper提供一个 noSwipingClass的属性,用来阻止自带的滚动事件 window.mySwip ...
- vue滚动行为控制——页面跳转返回上一个页面保留滚动位置
需求分析: 一般这个功能在后台管理系统用的比较多,因为后台页面都是在当前页面打开,对于某些列表筛选页,如果列表数据比较多,页面就会滚动.当页面发生滚动,对列表数据进行查看或者编辑的时候,跳转到下一级页 ...
- 滚动页面时DIV到达顶部时固定在顶部
本示例使用Javascript实现了滚动页面时,DIV到达顶部时固定在顶部.在IE下效果有点闪,效果网址:http://www.keleyi.com/keleyi/phtml/fixdiv.htm 下 ...
- 设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示;当页面滚动到起始位置时,头部div出现,底部div隐藏
设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...
- uniapp在在页面跳转时,若URL太长的字符串会导致数据传递失败
url有长度限制,太长的字符串会传递失败,可使用窗体通信.全局变量,或encodeURIComponent等多种方式解决,如下为encodeURIComponent示例的解决方法. <navig ...
- JQuery弹出菜单时禁止页面(body)滚动
最近在做手机端的弹出菜单,但是菜单弹出来后滑动手机屏幕的话页面滚动总是会将菜单滑上去,体验非常不好,所以查了一下弹出菜单时禁止页面滚动的方法,整理如下: 方法一:弹出菜单时给body和html添加一个 ...
- 使用 jQuery Ajax 在页面滚动时从服务器加载数据
简介 文本将演示怎么在滚动滚动条时从服务器端下载数据.用AJAX技术从服务器端加载数据有助于改善任何web应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用 ...
随机推荐
- 我的Emacs折腾经验谈(三) speedbar , tabbar 还有linum-mode
离上一篇博客已经很遥远了,最近总是各种逛,但没有心思静下来写点东西,这回写一下我之前用的一些东西. Speedbar 首先是speedbar,这个东西是emacs自带的,效果立竿见影,请输入M-x s ...
- 原生javascript-图片按钮切换
原生javascript-图片按钮切换 即上次被分配写原生JS相册弹窗后,这次又接到了写原生JS,图片按钮切换,真激情: 个人在线实例:http://www.lgyweb.com/picSwitch/ ...
- Linux centOS本地DNS安装
centOS本地DNS安装 在centOS里最常用的DNS服务工具应该是bind了.下面就以bind为例做一个DNS服务. 首先查看bind 是否已经安装 Rpm -qa | gerp bind 如果 ...
- XNA 4.0 环境搭建和 Hello World,Windows Phone 游戏开发
XNA 4.0 环境搭建和 Hello World,Windows Phone 游戏开发 使用 Scene 类在 XNA 中创建不同的场景(八) 摘要: 平方已经开发了一些 Windows Phone ...
- JavaScript中的call 和apply的用途以及区别
apply 接受两个参数,第一个参数指定了函数体内this 对象的指向,第二个参数为一个带下标的集合,这个集合可以为数组,也可以为类数组,apply 方法把这个集合中的元素作为参数传递给被调用的函数: ...
- Springboot 入门之Hello World
首先使用maven进行包加载和配置,但是你maven一定要配置好,maven的setting.xml文件一定要配置好,不然jar包加载不了的. <project xmlns="http ...
- C语言之循环结构 for(一)
一 for循环的介绍 语法: for(表达式1;表达式2;表达式3){ 循环体; } 循环步骤: A.执行表达式1,执行完毕跳转到B B.判断表达式2的结果是否为真,如果为真,跳转到C,否则跳转到E ...
- CoreCRM 开发实录 —— 单元测试之 Mock UserManager 和 SignInManager
单元测试的核心就是:只测试眼前的逻辑.这就要求所有的依赖项都要使用仿类来代替,也就是所谓的 Mock Object.在测试 ProfileRepository 和 AccountController ...
- python数据类型以及模块的含义
print(sys.path) #打印环境变量 print(sys.argv) #打印相对路径 print(sys.argv[1]) #打印对应的参数 1.在python最上有时候会导入os模块,表示 ...
- Swift3集成极光推送
现在很多程序都开始使用Swift开发了,但是第三方库大多数都是用OC写的,所以我们要使用Swift和OC混编.今天的内容主要讲Swift3.0集成极光推送. 1.准备工作 集成指南,极光上说的 ...