<!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. MySQL-procedure(cursor,loop)

    现有一张表spam_keyword,共629条记录,每条记录的word字段的字符数量不等. CREATE TABLE `spam_keyword` ( `kid` ) NOT NULL, `word` ...

  2. Linux安装Mysql rpm

    1.安装时候会提示与已经安装的RPM包有冲突,所以我们先卸载一些RPM包,要卸载哪些呢?我们要卸载的是包含有mariadb关键字的RPM包,执行命令:rpm -qa|grep mariadb来查看一下 ...

  3. .Net程序员之Python基础教程学习----字典的使用 [Third Day]

      今天学习了字典的使用, 所谓的字典其实就是键值对数据, 一个字典里面有唯一的Key对应一个value,Key是唯一的,Value不唯一. 在.net添加相同的Key会报错,在Python,若出现相 ...

  4. 网络之OSI&&TCP/IP比较

    共同点: 1.OSI和TCP/IP都采用了层次结构的概念 2.都能够提供面向链接(TCP)和无链接(UDP)两种通信服务机制 不同点: 1.前者7层,后者两层 2.对可靠性要求不同,TCP/IP要求高 ...

  5. 模版（template）

    模版(template) 在c++Template中很多地方都用到了typename与class这两个关键字,而且好像可以替换,是不是这两个关键字完全一样呢? 相信学习C++的人对class这个关键字 ...

  6. AC日记——二叉树最大宽度和高度 1501 codevs

    1501 二叉树最大宽度和高度  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 白银 Silver     题目描述 Description   给出一个二叉树,输出它的最大宽 ...

  7. 嵌入式Linux驱动学习之路(四)u-boot编译分析

    u-boot编译分析 在配置完成后,执行make开始编译.这里打开Makefile. 首先在目标all前有一句话首先检查是否有include/config.mk文件来判断是否成功配置过. ifeq ( ...

  8. 转: rapidJSON与jsoncpp语法说明

    转:  http://www.voidcn.com/blog/hudejun007/article/p-1811986.html

  9. SQL/LINQ/Lamda

    SQL LINQ Lambda SELECT * FROM HumanResources.Employee from e in Employees select e Employees   .Sele ...

  10. 创建Visual studio项目模板 vstemplate关键点纪要

    from:http://www.cnblogs.com/stickman/p/3454719.html 经过多次的实验,终于完美生成一个.VSIX的项目模板安装包,其中遇到不少问题与挫折,久经goog ...