`
jsczxy2
  • 浏览: 1275188 次
  • 性别: Icon_minigender_1
  • 来自: 常州
文章分类
社区版块
存档分类
最新评论

jquery滚动保持定位层

阅读更多

本插件借鉴了一些网上的资料,实际运用可以自行修改。

/*!
 * jQuery scrollsPosition plugin
 * jquery滚动保持定位层
 * Copyright (c) 2012 Geetaku
 * 
 * @author JSCZXY2
 * 
 */
$.fn.scrollsPosition = function() {
	var position = function(element) {
		element.css("z-index","999");
		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 {
				if(pos == "relative"){
					element.css({
						position: pos,
					});	
				}else{
					element.css({
						position: pos,
						top: top
					});	
				}
			}
		});
};
	return $(this).each(function() {
		position($(this));						 
	});
};
分享到:
评论

相关推荐

    jQuery顶部定位导航 jQuery滚动顶部定位导航网页特效.zip

    "jQuery顶部定位导航 jQuery滚动顶部定位导航网页特效.zip" 文件包含了一个利用jQuery实现的智能顶部导航栏,该导航栏在用户滚动网页时能够保持在屏幕顶部,提供持续的导航功能,同时具有动态效果,提升用户体验。...

    Jquery跟随滚动条漂浮层

    在网页设计中,"Jquery跟随滚动条漂浮层"是一种常见的交互效果,它使得某个元素(通常是广告、导航菜单或重要提示)在用户滚动页面时始终保持在屏幕的特定位置,提供持续的可视性。这种效果可以提高用户体验,因为...

    jQuery页面滚动时层智能浮动定位

    在网页设计中,"jQuery页面滚动时层智能浮动定位"是一种常见的交互效果,它使得页面上的某些元素(如导航栏、侧边栏广告或者提示信息)在用户滚动页面时始终保持在可视区域,提供更好的用户体验。这种效果是通过...

    jquery浮动固定层导航描点上下滚动的浮动定位层

    标题中的“jquery浮动固定层导航描点上下滚动的浮动定位层”是指在网页设计中,使用jQuery库实现的一种导航栏效果。这种效果使得导航栏在页面滚动时始终保持在屏幕顶部,提供持续的导航功能,同时可能包含有滚动描点...

    jquery页面滚动始终页面顶部固定层代码

    本文将深入探讨如何使用jQuery来实现页面滚动时始终保持在顶部固定的层。 首先,我们需要在HTML中设置一个类或ID,以便于我们通过jQuery选择这个元素。例如,我们可以创建一个带有"fixed-header"类的div元素,用于...

    Jquery 跟随滚动条漂浮层

    总结,使用jQuery实现跟随滚动条的漂浮层效果,主要涉及CSS固定定位、jQuery的事件监听和DOM操作。通过这些技术,我们可以创建出用户滚动页面时始终可见的元素,提升用户体验。在实际应用中,还需要结合具体项目需求...

    jquery特效DIV层跟随页面向下滚动

    总的来说,"jquery特效DIV层跟随页面向下滚动"是一种增强网页交互性的常见技术,它结合了jQuery的选择器、事件处理和样式控制,使关键内容始终保持可见,提高用户的浏览体验。在实际项目中,可以通过调整CSS样式和...

    jQuery实现的浮动层跟随页面上下滚动效果源码.zip

    【标题】"jQuery实现的浮动层跟随页面上下滚动效果源码.zip" 描述了一个使用JavaScript库jQuery创建的特效,该特效使得一个元素(通常是一个广告条、通知或导航菜单)在用户滚动页面时始终保持在视口可见的位置。...

    6种效果jquery页面滚动div层固定插件hcsticky

    jQuery HCSticky插件通过监听页面滚动事件,动态调整div层的CSS属性,使其在特定条件下(如滚动到特定位置)变为固定定位。插件内置了多种动画效果,使得这一转换过程更加平滑自然。 **三、使用方法** 1. **引入...

    页面 浮动层定位 jquery

    在网页设计中,浮动层定位是一项重要的技术,它允许元素在页面上保持固定的位置,即使用户滚动页面,这些元素也会始终可见。"页面浮动层定位"通常用于创建导航菜单、侧边栏、广告或者提示框等,以提供更好的用户体验...

    jquery弹出层鼠标点击弹出层可浮动在屏幕滚动

    标题中的“jquery弹出层鼠标点击弹出层可浮动在屏幕滚动”指的是使用jQuery实现的弹出层功能,当用户点击文字或图片时,弹出层会出现在屏幕中央,并且能随着浏览器窗口的滚动而保持相对位置,始终在用户的视线范围内...

    jQuery定位滚动导航效果代码.zip

    本项目“jQuery定位滚动导航效果代码”是利用jQuery实现的一种响应式滚动导航栏效果,旨在提高用户体验,使用户在浏览长页面时能够轻松地访问各个页面区域。这种效果常见于许多现代网站设计中,尤其是在单页应用(SPA...

    jquery控制滚动条下拉后DIV容器在页面中的位置

    标题中的“jquery控制滚动条下拉后DIV容器在页面中的位置”是指利用jQuery库来实现一个功能,即在用户滚动网页时,使指定的DIV元素始终保持在屏幕的某个固定位置,这种效果通常被称为“粘性导航”或“固定定位”。...

    jQuery页面滚动顶部右侧固定层代码.zip

    这个"jQuery页面滚动顶部右侧固定层代码.zip"压缩包包含了一个利用jQuery实现的特定功能,即当用户在页面上滚动时,一个元素(如导航菜单或侧边栏)会始终保持在屏幕的顶部右侧。这种效果常被称为“固定定位”或者...

    jQuery页面滚动左侧悬浮固定层菜单代码

    本文将详细介绍如何使用jQuery来实现页面滚动时左侧悬浮固定层菜单的功能。 首先,我们需要理解基本的HTML结构。一个典型的左侧悬浮菜单通常包含在一个`<div>`标签中,例如: ```html <li><a href="#section1...

    jquery右侧固定层鼠标悬停微信图标显示二维码和页面滚动显示返.

    在这个场景中,“jquery右侧固定层鼠标悬停微信图标显示二维码和页面滚动显示返回顶部”是一个典型的案例,结合了jQuery库、悬停事件处理和页面滚动功能。以下将详细介绍这些知识点。 首先,jQuery是一个广泛使用的...

    jQuery粘性滚动导航栏 jQuery粘性滚动导航栏网页特效.zip

    "jQuery粘性滚动导航栏" 是一种常见的前端网页特效,它使得导航栏在用户滚动页面时始终保持在屏幕顶部,提高用户体验。本文将深入探讨这个主题,包括其原理、实现方法以及涉及到的技术栈。 首先,jQuery 是一个轻量...

    jQuery右侧固定层导航锚点定位代码.zip

    1. **右侧固定层**:在页面滚动时,固定层是指在页面内容滚动时始终保持在屏幕一侧(通常是右侧或左侧)的元素。这种设计使得导航始终可见,即使用户滚动页面,也可以快速访问各个部分。实现方法通常是在CSS中设置`...

Global site tag (gtag.js) - Google Analytics