jQuery实现页面元素置顶时悬浮

一、JS Code：

$.fn.smartFloat = function () {

var position = function (element) {

var top = element.position().top, pos = element.css("position");

$(window).scroll(function () {

var scrolls = $(this).scrollTop();

if (scrolls > top) {

if (window.XMLHttpRequest) {

element.css({

position: "fixed",

top: 0

});

} else {

element.css({

top: scrolls

});

}

} else {

element.css({

position: pos,

top: top

});

}

});

};

return $(this).each(function () {

position($(this));

});

};

//绑定

$("#float").smartFloat();

</script>

二、Html Code：

我是置顶时悬浮的区域</div>

<br />

jQuery实现页面元素置顶时悬浮相关推荐

html 浮动窗口置顶,jQuery简单实现页面元素置顶时悬浮效果示例
本文实例讲述了jQuery简单实现页面元素置顶时悬浮效果的方法.分享给大家供大家参考,具体如下: 一.JS Code: $.fn.smartFloat = function () { var posi ...
jQuery修改页面元素的属性
作为一个后台开发者,在web开发的时候会常常遇到修改前台页面的属性的问题.这两天我发现jQuery的$("#id").attr("prop","值&q ...
利用 jQuery 操作页面元素的方法，实现电商网站购物车页面商品数量的增加和减少操作，要求单项价格和总价随着数量的改变而改变
查看本章节查看作业目录需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变当用户单击"+" ...
vue 页面不置顶问题(页面内操作、页面跳转后) - 集合篇
文章目录 vue 页面内切换dom,页面跳转后都不置顶? 一.页面内操作: 1.1 代码如下: 二.页面之间跳转: 2.1 代码截图 · 说明: 2.2 增加代码 · 示下: 三.拓展 · (直接置 ...
LaTeX中表格默认在页面中置顶怎么取消？
LaTeX中表格默认在页面中置顶怎么取消? 表格.图都默认在这一页置顶,已尝试过以下方法均不行: 1.[htbp]调节方式,无论如何调节没有任何变化 2.\usepackage{float} + [H ...
jQuery实现页面元素智能定位
原文:jQuery实现页面元素智能定位源代码下载地址:http://www.zuidaima.com/share/1550463635950592.htm
【避坑指“难”】页面Top置顶（返回顶部）小图标实现逻辑
窗口大小在不同浏览器中确定浏览器窗口大小没有想象中那么容易.所有现代浏览器都支持 4 个属性: innerWidth innerHeight outerWidth outerHeight outer ...
vue解决跳转时新页面没有置顶
V ue页面跳转后当前位置不在顶部的解决办法(几种办法) 1,在main.js中添加如下代码: // 跳转后返回顶部router.afterEach((to,from,next) => {win ...
将页面元素置为不可修改Readonly,所有元素统一修改，统一调用
使用JS方法,实现任何形式的元素的不可修改操作 <script language="javascript"> /**将所有元素置为不可修改 **/ function r ...
js，jquery获取页面元素距离浏览器工作区顶端的距离
先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome) 网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript) ...

jQuery实现页面元素置顶时悬浮

jQuery实现页面元素置顶时悬浮相关推荐

最新文章

热门文章