html 浮动窗口置顶,jQuery简单实现页面元素置顶时悬浮效果示例

本文实例讲述了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();

二、Html Code：

我是置顶时悬浮的区域

希望本文所述对大家jQuery程序设计有所帮助。

html 浮动窗口置顶,jQuery简单实现页面元素置顶时悬浮效果示例相关推荐

将页面元素置为不可修改Readonly,所有元素统一修改，统一调用
使用JS方法,实现任何形式的元素的不可修改操作 <script language="javascript"> /**将所有元素置为不可修改 **/ function r ...
python tkinter窗口切换_tkinter--实现简单的页面切换
[Python] 纯文本查看复制代码import tkinter as tk index_num = 4 def up_page(): info = frame_root.place_info() ...
html数字增加动态效果,jQuery实现数字自动增加或者减少的动画效果示例_泠吢_前端开发者...
本文实例讲述了效果图: 2. $(function(){ var obj={ el:$(".up"), max:1000, start:100//增加开始的初始值 } var o ...
jQuery移除页面元素
remove()方法删除被选元素,及其子元素删除指定的元素可以接受一个参数,对被删元素进行过滤 // 删除 $('.divClass').remove(); // 过滤删除 $('.divCla ...
Jquery简单的右侧浮动菜单
今天有空稍微看了下Jquery动画函数animate这个方法,发现可以用这个方法来做下简单的右侧浮动菜单因为经常做淘宝页面时候会碰到这样的效果以前都是用人家的javascript组件代码发现老是 ...
web实现置顶、置底功能、聊天页面、锚点、滚动条、vue、scrollTop、scrollIntoView、scrollHeight
目录前言 1.代码实现 3.scrollTop实现置顶置底(方式一) 4.scrollIntoView实现置顶置底(方式二) 5.总结前言在项目中遇到聊天功能,功能涉及置顶和置底知识,由此记录一 ...
jQuery修改页面元素的属性
作为一个后台开发者,在web开发的时候会常常遇到修改前台页面的属性的问题.这两天我发现jQuery的$("#id").attr("prop","值&q ...
html实现新闻滚动效果,jQuery实现新闻播报滚动及淡入淡出效果示例
这篇文章主要介绍了jQuery实现新闻播报滚动及淡入淡出效果,结合实例形式分析了基于jQuery插件的页面元素动态变换相关操作技巧,需要的朋友可以参考下本文实例讲述了jQuery实现新闻播报滚动及淡 ...
html简单响应式滚动条置顶
简单响应式滚动条置顶一般的,让页面出现滚动条的常见方法有: overflow:auto||overflow:scroll 或者overflow-x水平滚动条和overflow-y垂直滚动条那么现在 ...

html 浮动窗口置顶,jQuery简单实现页面元素置顶时悬浮效果示例

html 浮动窗口置顶,jQuery简单实现页面元素置顶时悬浮效果示例相关推荐

最新文章

热门文章