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

 <!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. 清除XCode缓存和生成文件

    1.Command-Option-Shift-K to clean out the build folder XCode4.2    finder中找到   /Users/apple/Library/ ...

  2. S_ISREG等几个常见的宏 struct stat

    S_ISLNK(st_mode):是否是一个连接.S_ISREG(st_mode):是否是一个常规文件.S_ISDIR(st_mode):是否是一个目录S_ISCHR(st_mode):是否是一个字符 ...

  3. uboot_starts_analysis.pdf

    Uboot中start.S源码的指令级的详尽解析 HTML版本的在线地址为:http://www.crifan.com/files/doc/docbook/uboot_starts_analysis/ ...

  4. 小白日记15：kali渗透测试之弱点扫描-漏扫三招、漏洞管理、CVE、CVSS、NVD

    发现漏洞 弱点发现方法: 1.基于端口服务扫描结果版本信息,比对其是否为最新版本,若不是则去其 官网查看其补丁列表,然后去逐个尝试,但是此法弊端很大,因为各种端口应用比较多,造成耗时大. 2.搜索已公 ...

  5. SQLServer-镜像配置

    实验环境:三台服务器分别为主服务器,镜像服务器,见证服务器,都加入域sql.com 1. 分别在三台服务器上安装SQL 2008 R2,安装数据库引擎和管理工具两个组件即可. 2. 镜像前准备工作. ...

  6. 1045 | error connecting to master 'slave_user@192.168.0.75:3306' - retry-time: 6

    mysql 主从复制问题整理   问题:      1045 | error connecting to master 'slave_user@192.168.0.75:3306' - retry-t ...

  7. 安装Laravel之坎坷记述

    写这篇文章记录以及分享我安装Laravel框架的一些经验 过程如下: 1.按照官方的描述,第一步是先安装composer来管理依赖=>composer下载传送门 下载之后点击安装,按照提示它需要 ...

  8. Android开发需要注意的坑

    Android开发需要注意的坑一览​对于一些Android开发过程中坑爹.细小,但又重要的错误的总结​Android开发在路上:少去踩坑,多走捷径其他参考: ​google官方版本发布图 ​umeng ...

  9. 原生javascript焦点轮播图

    刚刚学会,写了一个轮播图效果,不过bug蛮多,请高手指点一下,谢谢 <!DOCTYPE html> <html> <head> <meta charset=& ...

  10. 【Knockout】三、data-bind声明式绑定

    1.visible绑定 <div id="myview" data-bind="visible : isVisible"> visible bind ...