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应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用 ...
随机推荐
- HTML5 Canvas中实现绘制一个像素宽的细线
正统的HTML5 Canvas中如下代码 ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); c ...
- VPN pptp on linuxmint13/ubuntu12.04/debian VPS
VPN is a great thing when you are forced to be stuck somewhere. on ubuntu, you need to check out whe ...
- 揭开Html 标签的面纱,忘不了的html .
Html :(Hypertext MarkupLanguage),是用于描述网页文档的一种标记语言,是一种标准,它通过标记符号来标记要显示的网页中的各个部分.其本身是一种文本文件,通过在文本文件中添 ...
- 你的MongoDB Redis设置用户名密码了吗?看看shodan这款邪恶的搜索引擎吧!~
早上看新闻的时候看到了个醒目的新闻 开源中国:MongoDB 赎金事件持续发酵,究竟是谁之过? 博客园:MongoDB数据库勒索,中国受害者数量超乎你的想象,SOS! 1. 由于自己之前做过的项目,R ...
- Windows平台下安装Eclipse插件,开发Hadoop应用
欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...
- 微信小程序开发系列(一)小程序开发初体验
开发小程序所需的基本技能 关于小程序的介绍和使用场景这里不作介绍,这个系列的文章会一步一步地带领大家快速地学习和掌握小程序的开发. 关于还没有接触过小程序的开发者来说,最关心的问题无非就是,开发小 ...
- input中的name,value以及label中的for
input具有很多属性,比较常用的有type,value,name,placeholder,multiple,checked等.对于其中的name.value.label相关以及标签外的文字,我一直是 ...
- sass---Sass混合宏、继承、占位符
混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...
- openstack trove,使pylint忽略错误
一.什么是pylint Pylint 是一个 Python 代码分析工具,它分析 Python 代码中的错误,查找不符合代码风格标准和有潜在问题的代码. Pylint 是一个 Python 工具,除了 ...
- 获取URL中的参数值
//获取url中ID的值function getParamByName(name, url) { var match = RegExp('[?&]' + name + '=([^&]* ...