<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>JQ 元素距离顶部窗口小于0悬浮大于0恢复原来的状态</title> <link rel="stylesheet" href="css/base.css" /> <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script> </head> <body> <div style="height: 200px; background: #06f;"></div> <div style="height: 20px; background: #f60; z-index: 999; width: 100%;" class="headcall"></div> <div style="height: 3000px; background: #ccc;"></div> <script type="text/javascript"> $(function(){ headcall(); }); function headcall(){ var dh = $(".headcall"); var dhtop = dh.offset().top; //滚动监听 $(window).scroll(function(){ if ($(window).scrollTop() >= dhtop){ dh.css({'position':'fixed','top':'0','left':'0'});} else{ dh.css({'position':'static','top':'0','left':'0'}); } }); } </script> </body> </html>
效果图:
相关推荐
实现效果: jQ带返回顶部右侧悬浮客服,很简洁的一个特效,有客服,还有返回顶部的效果,在商城网站会用的很多,商品详情页面也是可以用到,php中文网推荐下载!
jQ带返回顶部右侧悬浮客服 jQuery带返回顶部右侧悬浮在线客服代码.zip
这是一款用jQuery制作的仿360浏览器的猜你喜欢隐藏悬浮窗口效果。这款悬浮窗口插件开始时隐藏的,但用户点击后,悬浮窗口水平伸展开来,并且可以用关闭按钮来关闭它。
详细注释,鼠标悬浮到标签是会改变标签颜色,鼠标离开时会取消样式hqul.style.background = "red"; //悬浮时设置当前浮动的标签为红色 for(i = 0;i;i++){ //循环ul的长度 if(hqul == hqulsl[i]) { //判断ep的子...
jQuery带返回顶部右侧悬浮在线客服代码 jQuery带返回顶部右侧悬浮在线客服代码
悬浮导航栏,可自定义样式,CSS联动变化特效,如TB,JD等电商平台使用的竖条导航栏
jQ图标嵌套悬浮动画是一款支持不同效果切换展示的jQuery悬浮动画插件。 jQ图标嵌套悬浮动画演示图:
当前好多网站比较流行的方式,特别是百度广告、网头部等大型网站也在使用这种样式 当鼠标下拉,需要控制的部分超出当前屏幕的时候,内容则会自动采用fixed定位在屏幕的位置
49、jQ侧边固定可折叠悬浮导航代码
JQ元素查看帮助手册文档,下载自网上,大家一起看看呗,我看着不错
Spotlight: jQuery stickyFloat——jQuery动画悬浮在网页顶部的层stickyFloat代码,上部的一个DIV在jQuery的控制下会动画缓冲移动到原始的位置,不管你如何拉动滚动条,它始终会显示在最初的顶部,通过本例你可学习...
网页前端适用,语言是jq,比较好看的懂,兼容ie6,欢迎大家下载
jQ侧边固定可折叠悬浮导航代码,带关闭按钮,点击关闭按钮能隐藏导航栏,并记录cookie,下次打开页面时也是关闭的状态。
jQuery商城常用左侧悬浮导航定位代码,一款仿各大商城左侧悬浮导航菜单特效,点击锚点定位滚动到对应楼层版块。
Jquery悬浮提示 非常简洁、使用的悬浮提示。可用于给客户一些控件说明提示和帮助说明
jquery中jquery.offset().top / left用于获取div距离窗口的距离,jquery.position().top / left 用于获取距离父级div的距离(必须是绝对定位的div)。 (1)先介绍jquery.offset().top / left css: 代码如下: *{ ...
各种效果弹窗。美观实用。绝对满意,多达10几种。调用方便
仿淘宝的一种鼠标悬浮商品之后图片被放大。采用jquery实现,非常简单,思路清晰。