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应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用 ...
随机推荐
- 淘宝ued - 前端智勇大闯关(第三季)答案(更新)
淘宝ued - 前端智勇大闯关(第三季)答案(更新) 下午在微博上看到了淘宝智勇大闯关第三季的信息,感觉挺有意思的,于是就尝试做了下.附上题目地址: http://ued.campus.alibaba ...
- Direct2D
Direct2D Direct2D教程III——几何(Geometry)对象 摘要: 目前博客园中成系列的Direct2D的教程有1.万一的 Direct2D 系列,用的是Delphi 20092.z ...
- Mongodb 集群搭建以及常见错误(不分块,分片,以及加验证)
1 关于Replica Sets +Sharding(主从复制加分片)搭建,不这详细去说,网上有很多,大部分的例子就三台服务器之间做主从复制,分2个shard,架构图如下 mongodb节点 分别为 ...
- 下载编译Chrome详细步骤
文章来源:http://blog.csdn.net/allendale/article/details/9262833 参考:http://dev.chromium.org/developers/ho ...
- 工作流--JBPM核心服务及表结构
一. 使用JBPM开发工作流的一般流程 1. jBPM的运行需要数据库的支持,因此系统设计时要选定所用数据库.只要是Hibernate支持的数据库,jBPM就支持.数据库的初始化 ...
- $.each()方法,其实挺不错的
例子为主 html主要代码 <div class="fl search">厂商:<select id="firms"><optio ...
- Java基础知识之文件操作
流与文件的操作在编程中经常遇到,与C语言只有单一类型File*即可工作良好不同,Java拥有一个包含各种流类型的流家族,其数量超过60个!当然我们没必要去记住这60多个类或接口以及它们的层次结构,理解 ...
- 解决xcode7.3的一个bug的方法
我今天遇到个bug,就是pod后,居然系统自带的提示语全部没有了,连NSString都要自己拼写,后来百度了,但是都没有解决,然后综合了一下,解决了. 方法: 首先点击桌面 找到前往-->然后选 ...
- ng1 http 读取json数据
在前端开发过程中,有时后端还没开发出接口,需要经常自己构造获取本地mock数据. AngularJS XMLHttpRequest $http 是 AngularJS 中的一个核心服务,用于读取远程服 ...
- 分享基于.NET MVC+EF CodeFirst+IOC+EasyUI的框架设计
**注:要做工,没什么时间,等有空时会上传到GIT,项目结构如上,简单的说一下: **支持IOC及多数据库等,各项目由MVC区域隔离: 主要使用基于接口与抽象类进行高度的抽象与接口隔离,与其它框架比较 ...