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

 <!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. PHP实现微博的同步发送(转)

    导读:在设计博客类站点时,有时会需要在发布文章时同步发布在微博上.本文阐述了实现该功能的基本方式. 准备工作   作为新浪微博的开发者,需要有身份验证: 个人身份认证的审核,一般一个工作日: 接着是提 ...

  2. 文件尾存在EOF吗？

    参考:http://bbs.csdn.net/topics/290027166 我們先一起來看看FILE是怎么定義的:   FILE                          <STDI ...

  3. oracle_partition sample_simple

    一:范围分区 就是根据数据库表中某一字段的值的范围来划分分区,例如: create table graderecord ( sno varchar2(10), sname varchar2(20), ...

  4. iOS语音合成

    苹果公司在iOS7中推出了语音合成的技术,无需网络环境也可以实现语音合成. iOS7语音合成的主要的API如下: 1.AVSpeechUtterance,是语音合成的基本单位,它封装影响语音合成的需要 ...

  5. 《Entity Framework 6 Recipes》中文翻译——第九章EntityFramework在N层架构程序中的应用（七）

    在WCF服务中的序列化代理 问题 您有一个从查询返回的动态代理对象,你想要把它像POCO对象已经进行序列化.在序列化基于实体对象的POCO(普通旧CLR对象)时,实体框架会自动生成一个动态生成的派生类 ...

  6. Android 高级UI设计笔记06：仿微信图片选择器（转载）

    仿微信图片选择器: 一.项目整体分析: 1. Android加载图片的3个目标: (1)尽可能的去避免内存溢出. a. 根据图片的显示大小去压缩图片 b. 使用缓存对我们图片进行管理(LruCache ...

  7. 关于错位动画的练习，原生js编写

    最近在网上看到一个关于错位动画的文章,感觉非常有趣,便自己练习了一下,文章连接:http://www.w3cplus.com/animation/staggering-animations.html ...

  8. 魔方阵算法及C语言实现

    1 魔方阵概念 填充的,每一行.每一列.对角线之和均相等的方阵,阶数n = 3,4,5….魔方阵也称为幻方阵. 例如三阶魔方阵为: 魔方阵有什么的规律呢? 魔方阵分为奇幻方和偶幻方.而偶幻方又分为是4 ...

  9. ios二维码扫描插件，适配当前主流扫描软件，自定义扫描界面。

            二维码介绍: 二维码(QR(Quick Response)code),又称二维条码,最早起源于日本. 它是用特定的几何图形按一定规律在平面(二维方向)上分布的黑白相间的图形,是所有信息 ...

  10. 关于环信的WebIm的SDK一些使用注意

    先打自己几下脸,不好好看接口文档,啪啪啪. 主要先说下回调,直接先copy文档的 conn.listen({ onOpened: function ( message ) { //连接成功回调 //以 ...