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

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.    <html xmlns="http://www.w3.org/1999/xhtml">
  3.    <head runat="server">
  4.        <title></title>
  5.        <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
  6.        <script type="text/javascript">
  7.            $(function() {
  8.                //获取要定位元素距离浏览器顶部的距离
  9.                var navH = $(".hb").offset().top;
  10.                //滚动条事件
  11.                $(window).scroll(function() {
  12.                    //获取滚动条的滑动距离
  13.                    var scroH = $(this).scrollTop();
  14.                    //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
  15.                    if (scroH >= navH) {
  16.                        $(".hb").css({ "position": "fixed", "top":  });
  17.                    }
  18.                    else if (scroH < navH) {
  19.                        $(".hb").css({ "position": "static" });
  20.                    }
  21.                })
  22.            })
  23.    </script>
  24.    </head>
  25.    <body>
  26.        <div style=" height: 300px;">
  27.            空div</div>
  28.        <div class="hb" style="height: 100px; width: 100%; background: #999">
  29.            移动到顶部固定不变</div>
  30.        <div style="background: #ccc; height: 1500px;">
  31.            空div</div>
  32.    </body>
  33.    </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开发——UI篇&ScrollView详解

    创建方式 1:StoryBoard/Xib 这里StoarBoard就不多说,直接拖就可以,说太多没意思,如果连这个都不会我只能先给你跪了! 2:代码: CGRect bounds = [ [ UIS ...

  2. rand值出现负数的解决方案

    当rand($number)或者mt_rand($number)的时候,$number太大,超过pow(2,31) - 1;即整型最大值的时候,会出现负数. 如果只是单纯转换成整数而已的话,可以采用s ...

  3. UNIX标准化及实现之POSIX标准可选头文件

    POSIX标准定义的可选头文件 头文件 说明 <aio.h> 异步I/O <mqueue.h> 消息队列 <pthread.h> 线程 <sched.h> ...

  4. extern的困惑

    摘自:http://blog.csdn.net/fxjtoday/article/details/6021845 如果想明白为什么需要extern, 需要从编译和链接讨论起, 现代编译器一般采用按文件 ...

  5. 如何制作按钮hover状态

    1.选中文字加背景图层 2.Ctrl+J复制图层,向下轻移. 3.点击所复制图层的背景图层,右键选中——混合选项 弹出图层样式框: 4.选择渐变叠加,将渐变——反向勾选上,确定: 5.完成,效果如图.

  6. VIM标记 mark 详解

    转载:http://blog.163.com/lgh_2002/blog/static/44017526201081154512135/ 我的vim配置:http://pan.baidu.com/s/ ...

  7. Android（java）学习笔记74：Java线程池

    线程池: 1)程序启动一个新线程成本是比较高的,因为它涉及到要与操作系统进行交互.而使用线程池可以很好的提高性能,尤其是当程序中要创建大量生存期很短的线程时,更应该考虑使用线程池. 2)线程池里的每一 ...

  8. [改善Java代码]推荐在复杂字符串操作中使用正则表达式

    一.分析  字符串的操作,诸如追加.合并.替换.倒序.分隔等,都是在编码过程中经常用到的,而且Java也提供了append.replace.reverse.split等方法来完成这些操作,它们使用起来 ...

  9. 【最短路】ACdream 1198 - Transformers' Mission

    Problem Description A group of transformers whose leader is Optimus Prime(擎天柱) were assigned a missi ...

  10. 【数论】UVa 10586 - Polynomial Remains

    Problem F: Polynomial Remains Given the polynomial a(x) = an xn + ... + a1 x + a0, compute the remai ...