`

JQ 元素距离顶部窗口小于0悬浮大于0恢复原来的状态

阅读更多
<!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>

 

效果图:

 

 

 

 

 

 

 

 

 

 

 

  • 大小: 5.3 KB
1
1
分享到:
评论

相关推荐

    jQ带返回顶部右侧悬浮客服.zip

    这篇文章将详细讲解如何实现"jQ带返回顶部右侧悬浮客服"这一功能,它结合了JavaScript库jQuery和HTML/CSS技术,适用于商城网站或其他需要在线客服和返回顶部功能的网页。 首先,"jQ"指的是jQuery,一个高效、简洁且...

    基于JQ悬浮导航CSS联动变化特效

    这包括但不限于颜色、字体、布局、悬浮状态下的样式改变等。为了实现悬浮效果,可以使用CSS的`position: fixed`属性,将导航栏固定在屏幕的某个位置。同时,通过设置合适的`top`、`right`、`bottom`或`left`值,确保...

    jQ带返回顶部右侧悬浮客服 jQuery带返回顶部右侧悬浮在线客服代码.zip

    实现右侧悬浮客服的功能,开发者可能利用了JavaScript的窗口滚动事件和计算元素位置的函数,当用户滚动页面时,客服图标始终保持在屏幕的右下角。而返回顶部的功能,一般会监听滚动事件,当用户滚动到一定距离时,...

    jq悬浮实例.html

    详细注释,鼠标悬浮到标签是会改变标签颜色,鼠标离开时会取消样式hqul.style.background = "red"; //悬浮时设置当前浮动的标签为红色 for(i = 0;i;i++){ //循环ul的长度 if(hqul == hqulsl[i]) { //判断ep的子...

    jQuery带返回顶部右侧悬浮在线客服代码

    这通常通过设置CSS样式实现,如`position: fixed`属性可以让元素相对于浏览器窗口定位,`right: 0`将其放置在屏幕右侧。 4. **在线客服系统集成**:在线客服代码可能需要连接到某个第三方服务提供商,如Tawk.to、...

    jquery右侧跟随悬浮固定窗口

    【jQuery右侧跟随悬浮固定窗口】是一种常见的网页设计技术,它能提供用户友好的浏览体验,尤其是在长页面中,用户无需滚动回顶部就能访问关键信息。这种设计方式在现代网页开发中广泛应用,例如百度广告和网站头部等...

    jquery悬浮微信二维码微博分享置顶特效

    4. 当元素距离顶部小于设定值时,通过修改CSS的`position`属性为`fixed`,并将`top`设为0,实现悬浮置顶效果。 5. 生成微信二维码,可以使用如`qrcode.js`这样的JavaScript库,根据需要设置尺寸和颜色等属性。 6. ...

    弹性返回顶部JQ代码

    在网页设计中,"弹性返回顶部"功能是一个常见的交互元素,尤其在长页面滚动时,它可以帮助用户快速回到页面的顶部。"弹性返回顶部JQ代码"是指利用jQuery库实现的这种功能,jQuery是一个广泛使用的JavaScript库,它...

    JQ弹出窗口多种

    在网页设计和开发中,弹出窗口是一种常见的交互元素,用于显示通知、警告、确认信息或者进行更复杂的操作。标题"JQ弹出窗口多种"以及描述中的"各种效果弹窗。美观实用。绝对满意,多达10几种。调用方便"指的是一系列...

    jquery左侧悬浮收缩菜单

    对于左侧悬浮菜单,我们可能需要设置元素的`left`属性为0,使其始终贴合屏幕左侧。 收缩功能主要由jQuery的事件处理和DOM操作完成。初始状态下,菜单可能被设定为一个小图标,当用户点击这个图标时,jQuery会触发一...

    jQ图标嵌套悬浮动画zip

    "jQ图标嵌套悬浮动画zip"是一个专门针对jQuery的插件,它允许开发者创建富有动态效果的图标展示,特别适用于网站设计,提升用户体验。 这个插件的核心功能是实现图标在页面上的悬浮动画效果,这意味着图标不仅会随...

    jQuery实现页面下拉100像素出现悬浮窗口的方法

    // 当滚动距离大于100像素时,悬浮窗口淡入 } else { $('.fdPhone').fadeOut(300); // 当滚动距离小于100像素时,悬浮窗口淡出 } }); }); ``` `$(window).scroll(function() {...})` 是一个滚动事件监听器,...

    JQ 新窗口打开链接并设置参数

    标题 "JQ 新窗口打开链接并设置参数" 涉及到的是使用jQuery库来实现JavaScript中的一个常见功能,即在新窗口中打开一个链接,并且可以传递参数。jQuery是JavaScript的一个轻量级库,它简化了DOM操作、事件处理、动画...

    JQ 弹出窗口

    "JQ 弹出窗口"这个主题主要涉及的是如何使用jQuery来实现弹出窗口的效果,这在网页交互和用户提示中非常常见。以下是对这个知识点的详细讲解: 首先,我们需要理解jQuery的基本用法。jQuery通过选择器(如$("#id")...

    JQ 实现的类似知美、堆糖的顶部菜单 浮动 吸顶效果

    比较滚动位置与菜单元素距离顶部的距离。如果滚动位置大于或等于这个距离,那么应该激活吸顶效果。可以设置一个变量`threshold`作为菜单元素从顶部开始的阈值。 6. **切换CSS属性**: 根据判断结果动态修改`#...

    JQ 简单的返回顶部

    **JQ简单的返回顶部**是基于JavaScript库jQuery实现的一个实用功能,它允许用户在浏览页面时轻松地将滚动条返回到页面顶部。这个功能在网页内容较多、滚动条需要大量滚动时尤其有用,提升了用户体验。在本文中,我们...

    适应窗口的JQ

    标题中的“适应窗口的JQ”指的是使用jQuery库来实现网页元素随着浏览器窗口大小变化而自动调整布局的技术。在响应式网页设计中,这种能力至关重要,确保网站在不同设备和屏幕尺寸上都能提供良好的用户体验。 描述中...

    JQ 子元素过滤选择器

    本文将深入探讨“JQ子元素过滤选择器”,这是一个强大的功能,可以帮助开发者精确地定位到DOM树中的特定子元素,进而进行进一步的操作。通过学习和掌握这些选择器,可以提高开发效率,使代码更加简洁易读。 首先,...

Global site tag (gtag.js) - Google Analytics