<!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实现，非常简单，思路清晰。