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

 <!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. 如何在VS C++中高亮用户自定义关键字

    这篇文章主要参考一篇英文博客,具体步骤如下: 1.在VS中找到msdev.exe所在的目录,一般在...\Microsoft Visual Studio.NET\Common7\IDE\devnev. ...

  2. java中访问mysql数据库中的表结构信息

    package cn.hncu.meta; import java.sql.Connection;import java.sql.DatabaseMetaData;import java.sql.Re ...

  3. Spring与Struts整合

    Spring框架是一个非常优秀的轻量级Java EE容器,Spring框架是整个轻量级Java EE框架的核心.大部分的Java EE应用,都会考虑使用Spring容器管理应用中的组件,从而保证各组件 ...

  4. Android（java）学习笔记94：关于广播接收者的注册和使用心得

    下面我们先看一部分代码,由代码进行进一步的深入: registerReceiver( new BroadcastReceiver() {//onReceive中代码的执行时间不要超过5s,androi ...

  5. SQL Server2008创建约束图解 转

    转自 http://www.cnblogs.com/longhs/p/3670307.html SQLServer 中有五种约束, Primary Key 约束. Foreign Key 约束. Un ...

  6. 理解Android系统的进程间通信原理(一）----RPC中的代理模式

    Android系统中的进程间通信是通过一个轻量级的RPC(Remote Procedure Call远程进程调用)和AIDL(Android Interface Definination Langua ...

  7. c++、c实现推箱子小游戏

    经过四次的修改和优化,终于将推箱子这个游戏完整的写出来了,今天就像大家分享一下这个游戏的编写. 这个游戏界面的编写总的来说不困难,主要是推动箱子的算法. (1)利用数组和windows api 即可写 ...

  8. JS中的原型继承和多重继承

    概念:1原型继承是创建新类型对象----子类型,子类型基于父类型,子类型拥有父类型所有的属性和方法(从父类型继承得到),然后修改其中的部分内容或者添加新的内容.继承最好在子类型模型可以被视为父类型对象 ...

  9. MyBatis(3.2.3) - Cache

    Caching data that is loaded from the database is a common requirement for many applications to impro ...

  10. JQGrid各种参数详解API（转载）

    下面是转自其他人blog的一个学习资料,与其说是学习资料,说成查询帮助文档更加合适. jqGrid学习之 ------------- 安装 jqGrid安装很简单,只需把相应的css.js文件加入到页 ...