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应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用 ...
随机推荐
- 解决WP7的32位图像渐变色色阶问题
做游戏时发现背景图色阶现象严重,想了想会不会是显卡色深问题,于是加了下面一段代码,结果解决这个问题. graphics.PreferredBackBufferFormat = Microsoft.Xn ...
- WP8开发札记(二)让程序支持锁屏运行
我们都知道WP8是采用墓碑机制来管理应用程序的. 当我们把手机锁屏了,默认情况下,App就触发了deactivated 事件,准备被墓碑化了. 但是,有些时间我们不想让程序就此终止运行.(比如说,你开 ...
- Java网络请求getInputStream异常
今天调试网络请求部分时,当getInputStream失败时直接抛出异常.解决方法时在getInputStream之前获取ResponseCode if( connection.getResponse ...
- 如何利用PopupWindow实现弹出菜单并解决焦点获取以及与软键盘冲突问题
如何利用PopupWindow实现弹出菜单并解决焦点获取以及与软键盘冲突问题 如何利用PopupWindow实现弹出菜单并解决焦点获取以及与软键盘冲突问题 在android中有时候可能要实现一个底部弹 ...
- Python之路 1Day
1.python基础入门 作者:黄旭 提示: 语法基于python3.5版本(会提示2.7版本和3.5版本的区别) Python命令行将以>>>开始,比如 >>> ...
- Ajax实现xml文件数据插入数据库(一)--- 构建解析xml文件的js库
Ajax实现将xml文件数据插入数据库的过程所涉及到的内容比较多,所以对于该过程的讲解本人打算根据交互的过程将其分为三个部分,第一部分为构建解析xml文件的javascript库,第二部分为ajax与 ...
- [C++]neuroscan的延时预估
一直用自己写的程序在线处理脑电信号,知道其中有一个时间延时,但具体延时是多少没有是个准确的估计,今天抽时间做了一下,发现大概延时在100ms左右. 以后尝试使用并口操作.应该可以完全避免这个问题. 实 ...
- 解决Eclipse一直loading workbench无法启动的问题
不知怎地,Eclipse始终停留在Loading workbench状态.反复重启,状态依旧.尝试解决. 停止时显示的状态:”Loading workbench”,看来和这个workbench插件有关 ...
- PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
课前小知识普及:MSSQL和SQL Server是同一个软件,叫法不同而已,MSSQL全称是Microsoft SQL Server,MSSQL是简写,有些人则喜欢直接叫SQL Server,我就比较 ...
- Android Studio报错 Error: A library uses the same package as this project
今天在导入一个项目的时候,as报错 Error: A library uses the same package as this project 经过百度Google 发现解决办法:在modules的 ...