`
piziwang
  • 浏览: 239982 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

Jquery固定Div在页面顶部

阅读更多

html:

<div id="uberbar">
	<a href="#top">Top of Page</a>
	<a href="#bottom">Bottom of Page</a>
</div>

 CSS:

#uberbar	{ 
	border-bottom:1px solid #eb7429; 
	background:#fc9453; 
	padding:10px 20px; 
	position:fixed; 
	top:0; 
	left:0; 
	z-index:2000; 
	width:100%;
}

 Jquery JavaScript:

$(document).ready(function() {
	(function() {
		//settings
		var fadeSpeed = 200, fadeTo = 0.5, topDistance = 30;
		var topbarME = function() { $('#uberbar').fadeTo(fadeSpeed,1); }, topbarML = function() { $('#uberbar').fadeTo(fadeSpeed,fadeTo); };
		var inside = false;
		//do
		$(window).scroll(function() {
			position = $(window).scrollTop();
			if(position > topDistance && !inside) {
				//add events
				topbarML();
				$('#uberbar').bind('mouseenter',topbarME);
				$('#uberbar').bind('mouseleave',topbarML);
				inside = true;
			}
			else if (position < topDistance){
				topbarME();
				$('#uberbar').unbind('mouseenter',topbarME);
				$('#uberbar').unbind('mouseleave',topbarML);
				inside = false;
			}
		});
	})();
});
 
分享到:
评论
1 楼 zxlmmmm 2012-07-31  
ie下不行啊

相关推荐

    jQuery超强div固定位置布局特效插件

    这款基于jQuery的插件允许开发者实现div元素在页面滚动时保持在特定位置的效果,如固定侧边栏、顶部导航或者浮动按钮。这种布局方式能够确保关键信息始终可见,提高用户交互性。 首先,我们要理解jQuery库。jQuery...

    固定div,滚动到顶部固定

    在网页设计中,"固定div,滚动到顶部固定"是一种常见的布局技巧,它可以使特定的div元素在页面滚动时始终保持在视口的可见位置,通常用于实现导航栏、侧边栏等元素的固定效果。这种效果可以提升用户体验,因为用户...

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

    标题中的"jquery特效DIV层跟随页面向下滚动"指的是在网页设计中使用jQuery库实现的一种交互效果。当用户滚动页面时,一个特定的div元素(通常包含重要的信息或导航)会固定在屏幕的一侧,保持可见,即使用户滚动页面...

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

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

    jquery 可拖动浮动DIV ,可固定DIV

    接下来是“可固定DIV”。这个功能通常用于创建如侧边栏、工具栏等元素,它们在页面滚动时始终保持在屏幕的特定位置。可以使用CSS的`position: fixed`属性来实现,指定元素相对于浏览器窗口的位置,而不是相对于其在...

    jquery右固定div

    在网页设计中,"右固定div"是一种常见的布局技巧,它可以使某个div元素始终保持在页面右侧,并且在用户滚动页面时依然保持固定位置。这种效果通常通过JavaScript库,如jQuery来实现,因为纯CSS虽然也可以做到,但在...

    JQuery使导航栏固定于网页顶部

    4. **实现逻辑**:在JQuery代码中,可以设定一个阈值,比如当页面顶部与导航栏底部的距离小于某个值时,导航栏变为固定定位。这可以确保导航栏在合适的时候出现。 5. **参考示例**:提供的参考示例...

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

    **jQuery页面滚动与顶部右侧固定层代码详解** 在网页设计中,为了提升用户体验,我们经常会在页面滚动时,让特定元素如导航栏始终保持在屏幕顶部或右侧可见。这就是所谓的“固定层”效果。jQuery作为一款强大的...

    jquery固定表格行列

    为了实现固定表头效果,我们可以创建一个JavaScript函数,使用jQuery选择器获取表头并复制一份到新的div容器中,然后通过CSS样式将其固定在顶部。这里有一个基本的实现方法: ```javascript $(document).ready...

    jquery随页面滚动最终固定顶部的导航条插件

    标题中的“jquery随页面滚动最终固定顶部的导航条插件”指的是一个基于jQuery的JavaScript插件,该插件实现了一种交互效果:当用户在网页上滚动时,导航条会从页面底部开始移动,随着页面的向下滚动逐渐靠近顶部,...

    在页面固定div位置实示例

    在网页设计中,固定div(固定定位)是一种常见的布局技巧,它使得div元素在页面滚动时仍然保持在屏幕的特定位置,例如顶部导航、侧边栏等。本示例将探讨两种实现页面固定div位置的方法,并进行比较。 方法一:CSS ...

    jquery.实现div悬浮

    当页面滚动时,我们将div的top值设置为相对于窗口顶部的固定值,以保持其在屏幕上的位置。这里是一个简单的jQuery实现: ```javascript $(document).ready(function() { var $floatingDiv = $('#floatingDiv'); ...

    jquery页面滚动顶部固定层代码.zip

    在网页设计中,让元素在页面滚动到一定位置时固定在顶部是一种常见的增强用户体验的技巧。这个名为"jquery页面滚动顶部固定层代码.zip"的压缩包包含了一个利用jQuery实现的这种效果的代码示例。jQuery是一款强大的...

    div css3样式表制作jquery返回顶部特效

    在网页设计中,"div css3样式表制作jquery返回顶部特效"是一个常见的需求,它能够提升用户体验,使得用户在浏览长页面时能快速返回页面顶部。这个主题涉及到三个主要技术:HTML的`div`元素、CSS3样式以及jQuery库。 ...

    jquery表头固定、列固定完美解决方案

    这个div元素会被定位在页面的固定位置,跟随用户的滚动,始终保持可见。这样,用户可以快速参考固定的列数据,无需不断滚动回来查找。 实现这个功能的关键在于准确计算和设置CSS样式,特别是position属性。插件需要...

    滚动条下拉DIV固定在头部不动

    标题“滚动条下拉DIV固定在头部不动”指的是在网页设计中实现的一种特效,当用户滚动页面时,某个特定的DIV元素(例如一个导航栏)会保持在屏幕顶部,即使页面其他部分向下滚动,这个元素依然固定在视口的顶部。...

    div当滚动到页面顶部的时候固定在顶部实例代码

    标题中的“div当滚动到页面顶部的时候固定在顶部实例代码”描述了一个常见的网页设计技术,通常被称为“固定顶栏”或“固定导航”。这个技术使得网页的某个部分(在这个例子中是一个包含链接的div)在用户滚动页面时...

    jQuery设置div一直在页面顶部显示的方法

    jQuery部分 代码如下: [removed][removed] [removed] $(function () { var elm = $(‘#pordAttr’); var startPos = $(elm).offset().top; $.event.add(window, “scroll”, function () { var p = $(window)....

    div模块层随页面滚动遇顶固定的两种方法(js&jQuery)

    而当我们下拉滚动条,随着页面向下滚动,当此工具条接触到浏览器的上边缘时,这时就会独立出来固定在顶部,不跟随页面滚动而滚动了,如下图: 类似的例子效果我们在别的网站上都有看到过,例如腾讯微博首页上,当...

Global site tag (gtag.js) - Google Analytics