<!DOCTYPE html>

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <meta charset="utf-8" />

     <style type="text/css">

         * { margin: 0; padding: 0; border: 0; }

         .top { width: 100%; height: 30px; margin: 0 auto; text-align: center; background-color: #808080; color: #ffffff; margin-bottom: 20px; }

         .cen, .search, .search li { width: 1200px; height: 40px; margin: 0 auto; }

         .cen { width: 100%; height: 50px; background-color: #ffffff; z-index: 10; }

             .cen .search { background-color: #ff6a00; border-radius: 20px; }

                     .cen .search input { width: 1100px; height: 25px; margin-left: 50px; margin-top: 10px; background: none; outline: none; font-size: 14px; color: #000000; }

         input::-webkit-input-placeholder { color: #808080; }

         input:-moz-placeholder { color: #808080; }

         .con { width: 1200px; height: 1500px; margin: 0 auto; text-align: center; background-color: #ffd800; }

     </style>

     <script src="js/jquery-1.10.2.js"></script>

 </head>

 <body>

     <div class="top">顶部内容</div>

     <div class="cen"><!--这里注意一定要用一个宽100%的外框框起来，否则会影响美观，整体元素也会在固定置顶时靠左浮动-->

         <div class="search"><!--这里在用一个宽为1200的元素将内容居中到页面-->

             <input type="text" placeholder="请输入您需要查找的内容..." />

         </div>

     </div>

     <div class="con">页面内容</div>

     <script type="text/javascript">

         //search在滚动条下滑一定高度后固定置顶

         var titleH = $(".cen").offset().top;                      //获取滚动条下滑高度（即search固定置顶的条件）

         $(window).scroll(function () {                                //window滚动条事件

             var scroH = $(this).scrollTop();                          //获取滚动条滑动的距离

             if (scroH > titleH) {                                     //判断滚动条滑动高度是否大于指定条件高度

                 $(".cen").css({ "position": "fixed", "top": 0 }); //大于就执行search固定置顶

             } else if (scroH <= titleH) {                             //小于等于指定条件高度

                 $(".cen").css({ "position": "static" });          //则就恢复原位

             }

         });

     </script>

 </body>

 </html>

JavaScript学习笔记-元素在滚动条滑动一定高度后自动置顶的更多相关文章

  1. JavaScript学习笔记-随滚轮匀速滑动的浮动广告窗动画

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  2. Java程序猿JavaScript学习笔记（2——复制和继承财产）

    计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...

  3. javascript学习笔记(四) Number 数字类型

    数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数  toExponential() 方法 用科学 ...

  4. JavaScript学习笔记之数组（二）

    JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...

  5. JavaScript学习笔记[0]

    JavaScript学习笔记[0] 使用的是廖雪峰JavaScript教程. 数据类型 Number 表示数字,不区分浮点整形. === 比较时不转化数据类型. == 反之. NaN与任何值都不想等, ...

  6. Java程序猿的JavaScript学习笔记（1——理念）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  7. Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  8. Javascript学习笔记四——操作表单

    Javascript学习笔记 大多网页比如腾讯,百度云之类的需要登陆,用户输入账号密码就可以登陆,那么浏览器是如何获取用户的输入的呢?今天就记录一下操作表单. 操作表单与操作DOM是差不多的,表单本身 ...

  9. Javascript学习笔记三——操作DOM（二）

    Javascript学习笔记 在我的上一个博客讲了对于DOM的基本操作内容,这篇继续巩固一下对于DOM的更新,插入和删除的操作. 对于HTML解析的DOM树来说,我们肯定会时不时对其进行一些更改,在原 ...

随机推荐

  1. Java虚拟机 - 内存模型

    本文主要介绍Java虚拟机的内存分布以及对象的创建过程. 一.Java虚拟机的内存分布 文章开始前读者需要了解Java虚拟机的运行时数据区是怎样划分的.如下图所示: 1.程序计数器(Program C ...

  2. ELF Format 笔记（七）—— 符号表

    最是那一低头的温柔,像一朵水莲花不胜凉风的娇羞,道一声珍重,道一声珍重,那一声珍重里有蜜甜的忧愁 —— 徐志摩 ilocker:关注 Android 安全(新手) QQ: 2597294287 符号表 ...

  3. windows下 MySQL手动安装与卸载

    下载文件以后进行解压 ,指定文件的具体位置 1.安装 选择路径下的mysqld --intall 指定服务名称  --设置配置文件 例子: C:\Users\Administrator\Desktop ...

  4. 理解 QEMU/KVM 和 Ceph（1）：QEMU-KVM 和 Ceph RBD 的 缓存机制总结

    本系列文章会总结 QEMU/KVM 和 Ceph 之间的整合: (1)QEMU-KVM 和 Ceph RBD 的 缓存机制总结 (2)QEMU 的 RBD 块驱动(block driver) (3)存 ...

  5. 在dreamweaver上面制作表格

    开始有点犯二,准备一行一行敲,五六十行,人都得敲疯,还容易出错...... 直接从wps复制粘贴到设计里面,立马就出来了,费那事干嘛,哎,工具还是用的不熟

  6. 使用jMeter测试Solr服务接口

    之前一直用ab做简单的服务接口测试,ab功能强悍,使用简单,但是没有生成专题图和表格等功能,因此,我们决定使用jmeter来作为我们测试工具.接下来,我们将详细介绍jmeter使用的步骤,主要包括:j ...

  7. NOIP2010引水入城[BFS DFS 贪心]

    题目描述 在一个遥远的国度,一侧是风景秀美的湖泊,另一侧则是漫无边际的沙漠.该国的行政区划十分特殊,刚好构成一个N 行M 列的矩形,如上图所示,其中每个格子都代表一座城市,每座城市都有一个海拔高度. ...

  8. 第16章 调色板管理器_16.4 一个DIB位图库的实现（2）

    //接上一篇 //DibPal.h /*----------------------------------------------------------------- DIBPAL.H heade ...

  9. ComboBox的数据联动

    实现效果: 点击年级下拉框值时,获取科目下拉框值 一:加载年级下拉框值 GradeDAL层: //检索所有年级名称集合,返回的是泛型集合List<Grade> public List< ...

  10. Maven学习（四）Maven 命令行选项

    说明: 1.使用-选项时,和后面的参数之间可以不要空格.而使用--选项时,和后面的参数之    间必须有空格.如下面的例子: $ mvn help:describe -Dcmd=compiler:co ...