Jquery效果之固定不动的块
好多页面都有用到这种效果,大概就是不论页面上下如何滚动,固定不动的元素不随页面滚动,代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<style type="text/css">
.clear{ clear:both;}
.main{ width:600px; margin:0 auto;}
.left{ width:395px; float:left; background:#066; height:1000px; text-align:center; font:bold 20px/30px Arial, Helvetica, sans-serif; color:#FFF;}
.right{ width:195px; float:right; background:#C36; height:300px;}
#fixed{ position:fixed; background:#000; font:bold 26px/56px "微软雅黑"; color:#FFF; text-align:center; margin:0 auto; width:195px;}
</style>
</head> <body>
<div class="main">
<div class="left"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="right">
<div id="fixed">我不懂</div>
</div>
<div class="clear"></div>
<script>
$(function(){
$(window).scroll(function(){
if($(document).scrollTop()>10){
$('#fixed').css('top','0');
} else{
var _top = 10 -$(document).scrollTop() ;
$("#fixed").css("top",_top+'px');
}
})
})
</script>
</div>
</body>
</html>
Jquery效果之固定不动的块的更多相关文章
- 在网站开发中很有用的8个 jQuery 效果【附源码】
jQuery 作为最优秀 JavaScript 库之一,改变了很多人编写 JavaScript 的方式.它简化了 HTML 文档遍历,事件处理,动画和 Ajax 交互,而且有成千上万的成熟 jQuer ...
- jQuery 效果 —— 滑动
jQuery 效果 -- 滑动 1.向下滑动元素 (1)使用slideDown()方法可以用于向下滑动元素 $("button").click(function(){ $(&quo ...
- jQuery 效果 —— 隐藏和显示
jQuery 效果 -- 隐藏和显示 1.隐藏和显示 (1)在jQuery中我们可以使用hide()和show()分别隐藏和显示HTML元素: //隐藏元素 $("button") ...
- jQuery 效果函数
jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...
- JQuery: JQuery效果(隐藏、显示、切换,滑动,淡入淡出,以及动画)
JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() ...
- jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏
jQuery 效果- 隐藏和显示:hide() 和 show() 规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒 您可以使用 toggl ...
- Jquery效果代码--(二)
//jQuery 效果- 隐藏和显示.通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: //掩藏效果演示: $(document).ready(fun ...
- jQuery 效果方法
jQuery 效果方法 下面的表格列出了所有用于创建动画效果的 jQuery 方法. 方法 描述 animate() 对被选元素应用"自定义"的动画 clearQueue() 对被 ...
- jQuery效果:隐藏、显示、切换、滑动、淡入淡出、动画
jQuery效果 隐藏.显示.切换.滑动.淡入淡出.以及动画 1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示 toggle()方法:可以使用它来切换hi ...
随机推荐
- word模版另存为网页(*.htm,*.html),转为jsp页面并加入数据后导出成word
word模版另存为网页之后,将html格式的文件转为jsp页面,在页面上加入相应的动态值,加入的值中包含图片,这个该怎么处理??另外导出的文件需要拷贝到不同的地方(无法联网)使用. <%@ pa ...
- android中数据存储
android中数据存储 Android 中存储数据的方式有五种:SQLite数据库.文件存储.内容提供者.网络.SharedPreferences(Key----value)五种存储方式. ...
- 探索WebKit内核(一)------ 菜鸟起步
为什么搞WebKit 如今研究WebKit的人越来越多,俺不能免俗,也增加当中.WebKit的火爆也是得益于浏览器和WebOS的混战,随着Palm WebOS, Chrome OS, Firefox ...
- linux jdk tomcat
linux jdk tomcat mysql的安装 mysql的话,推荐使用命令行安装,而不是用外部的源码去编译,因为简单粗暴. mysql服务:sudo apt-get install mysql- ...
- careercup-数组和字符串1.8
1.8 假定有一个方法isSubstring,可检查一个单词是否为其他字符串的子串.给定两个字符串s1和s2,请编写代码检查s2是否为s1旋转而成,要求只能调用一次isSubstring.旋转字符串: ...
- hibernate.hbm.xml配置文件内容说明
下面是一个自动生成的配置文件: <?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE hibernate-configuration PU ...
- PureMVC(JS版)源码解析(四):Notifier类
上一篇博客中,我们解析了Observer(观察者)类,这一篇博客我们来讲Notifier(通知着)类.关于Notifier类,源码注释上有这么一段: * @class puremvc.Not ...
- (转载)关于ArrayList的5道面试题
我以面试官的身份参加过很多Java的面试,以下是五个比较有技巧的问题,我发现有些初级到中级的Java研发人员在这些问题上没有完全弄明白,似懂非懂.所以我写了一篇相关的文章,帮助初级Java研发人员弄清 ...
- iOS创建界面方法的讨论
以前在入门的时候,找的入门书籍上编写的 demo 都是基于 Storyboards 拖界面的.后来接触公司项目,发现界面都是用纯代码去写复杂的 autoLayout 的.再然后,领导给我发了个 Mas ...
- win8 需要管理员权限才能删除此应用程序
在win8系统里面 安装了 dotfuscator,安装在c盘,结果发现运行是提示需要有管理员权限,想重新删除后安装也不行,删除的时候提示也需要管理员权限,网上查了一下资料,windows自xp开始, ...