好多页面都有用到这种效果，大概就是不论页面上下如何滚动，固定不动的元素不随页面滚动，代码如下：

<!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效果之固定不动的块的更多相关文章

  1. 在网站开发中很有用的8个 jQuery 效果【附源码】

    jQuery 作为最优秀 JavaScript 库之一,改变了很多人编写 JavaScript 的方式.它简化了 HTML 文档遍历,事件处理,动画和 Ajax 交互,而且有成千上万的成熟 jQuer ...

  2. jQuery 效果 —— 滑动

    jQuery 效果 -- 滑动 1.向下滑动元素 (1)使用slideDown()方法可以用于向下滑动元素 $("button").click(function(){ $(&quo ...

  3. jQuery 效果 —— 隐藏和显示

    jQuery 效果 -- 隐藏和显示 1.隐藏和显示 (1)在jQuery中我们可以使用hide()和show()分别隐藏和显示HTML元素: //隐藏元素 $("button") ...

  4. jQuery 效果函数

    jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...

  5. JQuery: JQuery效果（隐藏、显示、切换，滑动，淡入淡出，以及动画）

    JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() ...

  6. jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏

    jQuery 效果- 隐藏和显示:hide() 和 show() 规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒 您可以使用 toggl ...

  7. Jquery效果代码--（二）

    //jQuery 效果- 隐藏和显示.通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: //掩藏效果演示: $(document).ready(fun ...

  8. jQuery 效果方法

    jQuery 效果方法 下面的表格列出了所有用于创建动画效果的 jQuery 方法. 方法 描述 animate() 对被选元素应用"自定义"的动画 clearQueue() 对被 ...

  9. jQuery效果：隐藏、显示、切换、滑动、淡入淡出、动画

    jQuery效果 隐藏.显示.切换.滑动.淡入淡出.以及动画 1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示 toggle()方法:可以使用它来切换hi ...

随机推荐

  1. java的IO学习，字节流与字符流的编码讲解

    字节流与字符流 字节流可以处理所有类型的数据(图片.视频等),在java中对应的类都为“stream”结尾 1字节=8位二进制=具体存储空间   字符流仅能处理纯文本的数据,在java中对应的类都是以 ...

  2. Tomcat内存不足的解决办法

    Tomcat增加内存 -Xms512m -Xmx512m -XX:PermSize=128M -XX:MaxPermSize=512m -DCOM.HUATENG.PRODUCTION_MODE=fa ...

  3. ios UI 之间的切换方法，using prepareForSegue and not

    1, use prepareForSegue: - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender { RWTDe ...

  4. Cleaner Robot - CodeForces 589J（搜索）

    有一个M*N的矩阵,有一个会自动清洁的机器人,这个机器人会按照设定好的程序来打扫卫生,如果当前方向前面可以行走,那么直接走,如果不可以走那么会向右转动90度,然后回归上一步判断.求机器人最多能打扫的面 ...

  5. 浙大PTA - - File Transfer

    题目链接:https://pta.patest.cn/pta/test/1342/exam/4/question/21732 #include "iostream" #includ ...

  6. tar打包和解压命令

    如果你有一个大文件 想下载下来 但是又太大 可以压缩一下 然后打包 #压缩 tar -czvf ***.tar.gz tar -cjvf ***.tar.bz2 #解压缩 tar -xzvf ***. ...

  7. （转）关闭WordPress自动加载的Open Sans字体，总是连接googleapi.com，导致打开wordpress很慢

    转自http://www.xuanfengge.com/turn-off-automatic-loading-wordpress-open-sans-fonts.html 一.'在网上搜了一番,有四种 ...

  8. 23讲 URL

    这是看完23讲后的小笔记,关于URL规则.伪静态. 一.URL规则 2.此处的区分大小写,也只是对第一个字母区分,并非对整个模块名. 3.模块名复杂时,且区分大小写,此时在地址栏访问时要用" ...

  9. Python 3语法小记（六）条件、循环和assert、pass、del

    条件: if 条件:     语句块 elif:     语句块 else:     语句块 elif 表示 else if 这居然是合法的!!!1 < x < 2!!! >> ...

  10. SharePoint 2013 error The given assembly name or codebase System.ServiceModel.dll was invalid

    笔者近期在 SharePoint 2013 的环境中遇到一个奇怪的问题,前一天 SharePoint 2013 站点还是好好的.可是突然站点就报page can't display 500 错误: T ...