很多网站都有把某一块固定在顶部的功能，今天上网搜搜然后自己又写了一遍，贴出来给大家看看，哪天用到的时候自己也可以随时看看

 <!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 runat="server">

       <title></title>

       <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>

       <script type="text/javascript">

           $(function() {

               //获取要定位元素距离浏览器顶部的距离

               var navH = $(".hb").offset().top;

               //滚动条事件

               $(window).scroll(function() {

                   //获取滚动条的滑动距离

                   var scroH = $(this).scrollTop();

                   //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定

                   if (scroH >= navH) {

                       $(".hb").css({ "position": "fixed", "top":  });

                   }

                   else if (scroH < navH) {

                       $(".hb").css({ "position": "static" });

                   }

               })

           })

   </script>

   </head>

   <body>

       <div style=" height: 300px;">

           空div</div>

       <div class="hb" style="height: 100px; width: 100%; background: #999">

           移动到顶部固定不变</div>

       <div style="background: #ccc; height: 1500px;">

           空div</div>

   </body>

   </html>

西游记告诉我们：凡是有后台的妖怪都被接走了，凡是没后台的都被一棒子打死了。

把div固定在网页顶部的更多相关文章

  1. CSS Div固定在网页顶部、底部、左侧、右侧

    Div固定在网页顶部 .header { width:100%; height:80px; background-color:#FAFAFA; position:fixed; top:; left:; ...

  2. 固定在网页顶部跟随滚动条滑动而滑动的DIV层

    在一个页面放2个悬浮框,悬浮框随页面的上下滚动有上下波动的效果,最终固定在同一位置 体验效果:http://hovertree.com/texiao/jsstudy/1/ 代码如下: <!DOC ...

  3. css方法div固定在网页底部

    css .bottom{width:%;height:40px;background:#ededed;;}/*重点后两句*/ body <div class="bottom" ...

  4. 返回顶部的功能 div固定在页面位置不变

    1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0; 但是这个在iframe满地跑的页面实际开发中,有啥用 ...

  5. 让div固定在顶部不随滚动条滚动

    让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  6. 让div固定在顶部不随滚动条滚动【转】

    让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  7. div固定顶部和底部

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. JS网页顶部弹出可关闭广告图层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

随机推荐

  1. ios开发——实用技术篇OC篇&获取设备唯一标识

    获取设备唯一标识 WWDC 2013已经闭幕,IOS7 Beta随即发布,界面之难看无以言表...,简直就是山寨Android. 更让IOS程序猿悲催的是,设备唯一标识的MAC Address在IOS ...

  2. Ruby on Rails Tutorial 第三章 静态页面

    1.生成静态页面 $ rails generate controller StaticPages home help    #生成主页和帮助页面的路由.控制器及静态页面 $ rails destroy ...

  3. i = i++;

    在这里jvm里面有两个存储区,一个是暂存区(是一个堆栈,以下称为堆栈),另一个是变量区.语句istore_1是将堆栈中的值弹出存入相应的变量区(赋值):语句iload_1是将变量区中的值暂存如堆栈中. ...

  4. A Famous Music Composer

    描述 Mr. B is a famous music composer. One of his most famous work was his set of preludes. These 24 p ...

  5. 通用超级强大的基于Oracle数据库的代码生成器

    项目中使用了Oracle数据库,命名基本规范为表名和字段名全部大写,用下划线分割各个单词: 如“BASE_USER_LOGON_EXTEND”这个表表示用户登录的扩展表. 基于这个规范,通用权限管理系 ...

  6. ASP.NET MVC 4 如何避免数据库被自动创建或自动迁移

    保哥说要想避免数据库被自动创建或自动迁移,可以在Global.asax文件里的Application_Start方法中加入: System.Data.Entity.Database.SetInitia ...

  7. jetty-distribution-7.6.x 部署

    (1)启动 jetty 命令:java - jar start.jar 需要注意2个事项:必须使用JDK来运行jetty:启动是需要读取 start.ini 的配置信息. (2)第一个注意事项只要保证 ...

  8. TCP/IP与UDP区别

    最近面试,问到这方面的问题,这里总结一下: TCP (Transmission  Control  Protocol   传输控制协议):面向连接的,不可靠的,数据流服务.UDP (User  Dat ...

  9. “Request Entity Too Large” 上传图片出现大小限制

    昨天公司安卓app上传了图片爆了下面这个错误 <"-//IETF//DTD HTML 2.0//EN"> <html><head> <ti ...

  10. IP地址,子网掩码,默认网关,路由,形象生动阐述

    自己的Linux虚拟机已经分配了固定的IP地址(使用无线路由,用的是192.168.1.XX网段),公司的无线网络分配的IP地址是(10.51.174.XX网段) 所以当自己的电脑拿到公司,还想使用桥 ...