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 好用。

转载于:https://www.cnblogs.com/sgciviolence/p/5529998.html

html 页面太长滚动时，固定页面菜单标签，或者导航标签的位置，fixed/stickUp the position...相关推荐

使用 jQuery.Pin 垂直滚动时固定导航
ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击. jQuery Pin 借助jQuery的一个插件 jQue ...
网站页面太长怎么滚动截图
如果您的电脑是windows,且您想在windows电脑上对页面内容进行长截图,那您来对地方了,继续往下阅读,总有一种截图方法适合你. 第一种:Microsoft Edge浏览器 Windows 的本 ...
Element - table固定列页面数据过多滚动时显示问题
背景:使用el-tabe设置右侧固定列 fixed="right",没有设置表格固定高,数据过多时滚动table会出现如下情况: 代码如下: <el-table :data= ...
html 页面太长,页面数据展示的太长，怎么让他自动换行
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥 ...
qgridlayout 滚动时固定第一行_滚动直线导轨副的安装技术
简介直线滚动导轨作为一种功能部件,由于它具有许多独特的性能,因而在各种机械设备中尤其在机床中得到了广泛的应用. 滚动直线导轨副的安装种类很多,几乎能满足任何结构的需要,滚动直线导轨副在选用时通常为两 ...
php页面如何加入滚动广告,前端页面内实现左右摇摆广告
这次给大家带来前端页面内实现左右摇摆广告,前端页面内实现左右摇摆广告的注意事项有哪些,下面就是实战案例,一起来看一下. 代码解读定义 dom,容器中包含公告牌.挂公告牌的细绳和固定绳子的 3 个图钉 ...
qgridlayout 滚动时固定第一行_固定轴承内外圈，哈尔滨轴承小编为您支几招！
有转动的地方,就有HRB轴承(400-086-6629) 滚动轴承内外圈的定位与固定的方法很多,下列为几种常用的方法: a)用轴用挡圈嵌在轴的沟槽内,主要用于轴向力不大及转速不高时: b)用螺钉固定的 ...
自动滚放的html,HTML5实现视频播放器随页面滚动固定页面右下角效果详解
简要教程这是一款可以自动将HTML5视频播放器在页面向下滚动时,将其固定在页面右下角位置的jquery和CSS3效果. 使用方法在页面中引入jquery文件. HTML结构使用一个元素来包裹H ...
html页面刷新回到顶部_html回到页面顶部
js隐藏与显示回到顶部按钮现在大多数网站都会添加这种功能:当滚动条滚动到页面的下方时,页面的右下角会显示出来一个"回到顶部"的按钮或连接,点击该按钮后页面会跳转到顶部,或某一个适 ...

html 页面太长滚动时，固定页面菜单标签，或者导航标签的位置，fixed/stickUp the position...

html 页面太长滚动时，固定页面菜单标签，或者导航标签的位置，fixed/stickUp the position...相关推荐

最新文章

热门文章