<!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. RAID详解[RAID0/RAID1/RAID10/RAID5]

    一．RAID定义RAID(Redundant Array of Independent Disk 独立冗余磁盘阵列)技术是加州大学伯克利分校1987年提出,最初是为了组合小的廉价磁盘来代替大的昂贵磁盘 ...

  2. eclipse设置显示代码行数（转）

    (转自:http://jingyan.baidu.com/article/b2c186c89b7023c46ef6ff27.html) 载入eclipse的主页面,默认以英文版的eclipse为例 点 ...

  3. 单源最短路径算法——Dijkstra算法

    #include <stdio.h> #include <stdlib.h> #include <string.h> /* run this program usi ...

  4. [转]SQL 操作结果集 -并集、差集、交集、结果集排序

    本文转自:http://www.cnblogs.com/kissdodog/archive/2013/06/24/3152743.html 操作结果集 为了配合测试,特地建了两个表,并且添加了一些测试 ...

  5. 《2016ThoughtWorks技术雷达峰会----雷达新趋势》

    雷达新趋势    徐昊,ThoughtWorks中国区CTO 1.Open Source  open source 已经从一个简简单单的软件代码组织方式变成一种文化,一种运动.当谈到Open Sour ...

  6. AC日记——字符替换 openjudge 1.7 08

    08:字符替换 总时间限制:  1000ms 内存限制:  65536kB 描述 把一个字符串中特定的字符全部用给定的字符替换,得到一个新的字符串. 输入 只有一行,由一个字符串和两个字符组成,中间用 ...

  7. Json数据的学习

    JSON 教程 <body><h2>JSON Object Creation in JavaScript</h2> <p>Name: <span ...

  8. TestLink学习二：Windows搭建TestLink环境

    环境准备: 搭建php5.4.39+apache2.2+mysq5.5.28l环境 (可参考http://www.cnblogs.com/yangxia-test/p/4414161.html) (注 ...

  9. bzoj2286 消耗战

    还是虚树的题目啊... 如果只有一个询问,我们这么考虑,可以设dp[x]为只删除x子树内和x到父亲的边,使得x这棵子树内的能源岛屿都与x的父亲不连通的最小花费. 这样如果x本身是能源岛屿,那么dp[x ...

  10. 将数据库备份到AZURE blob storage

    1创建一个Storage Account 1)点击Browse->Storage accounts 2) 填写Storage account,请记住这个名字,之后创建credential需要用到 ...