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

 <!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. Jquery-Ajax常用总结

    1.方式一:访问.aspx 客户端: function Del(Id) { if (confirm("确认要删除?")) { $.ajax({ type: "Post&q ...

  2. css 之position用法详解

    css  之position用法详解: http://www.jb51.net/web/77495.html

  3. BootStrap2学习日记9---文本框的前缀和后缀

    先来看一段代码: <form method="" action=""> <div class="input-append input ...

  4. Android开发之神奇的Fading Edge，让你的View更有层次感！

    最近在研究Android Framework层源码,发现我们对源码的理解应该建立在对API的理解之上,如果有一些API你没用过,那么即使你在源码中见到这个东西都不知道是干嘛的,更谈不上理解了.一直以来 ...

  5. 关于Servlet会话跟踪的那些事儿

    关于servlet会话跟踪,一搜都能搜出很多.我也不免落入俗套,也总结了一把.希望我所总结的知识尽量是知识海洋里的一汪清泉.能帮助到我自己和哪怕一个人,那也是值得的. 故事由来: 我们知道,http协 ...

  6. Python 中使用optparse进行参数解析

    使用过Linux/Unix的人都会知道,命令行下的很多命令都需要参数,在C语言中添加和解析参数比较繁琐.Python中提供了optparse模块可以非常方便地处理命令行参数.   1  命令行参数的样 ...

  7. python(2)-字符串（2）

    字符串格式化: 前面说过一种字符串格式化方法,来复习一下: >>> print('His name is %s', 'jeff') His name is %s jeff 其实格式化 ...

  8. Linux基本命令之逻辑测试一

    1.判断一个命令的结果使用test,其返回0,或一个整数.返回0表示true,返回整数表示错误码 2.获取上一个命令的返回结果使用$? 3.例如 我的服务器上面存在/home/www这样一个文件夹,所 ...

  9. 【简单dp+模拟】hdu-5375（2015多校#7-1007）

    给你一个二进制数,,每一位有一个权值,让你转格雷码,求所对应格雷码位为1的权值的和:二进制位中的某些位为?,你需要给这些问号赋值使得到的和最大. 首先你得知道二进制转格雷码的规则,即格雷码位为[二进制 ...

  10. Android自动化测试介绍

    1.随机事件测试.通过adb命令执行测试Monkey 就是SDK中附带的一个工具, 用来做压力测试.应用程序crash 和 ANR时会产生日志. 然后根据关键字分析,就可以把应用出现的问题抓出来. 2 ...