<!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. n枚硬币问题(找假币)

    问题描述: 在n枚外观相同的硬币中,有一枚是假币,并且已知假币与真币的重量不同,但不知道假币与真币相比较轻还是较重.可以通过一架天平来任意比较两组硬币,设计一个高效的算法来检测这枚假币. 解题思路: ...

  2. Navicat for MySQL 工具注册码

    在使用 MySQL 客户端中,感觉 Navicat for MySQL 做的还是很不错的.鄙人比较懒,喜欢采用绿色安装的方式,百度网盘上备份的有个绿色的压缩包,解压打开需要注册,这里记录一下注册码,版 ...

  3. android AsyncTask实例

    .java package com.example.activitydemoay; import android.app.Activity; import android.content.Intent ...

  4. 解决mstsc无法连接问题：由于没有远程桌面授权服务器可以提供许可证

    一.故障案例① 今天上午在给测试组的IIS新增https的时候,发现远程弹出如下错误: 由于没有远程桌面授权服务器可以提供许可证,远程会话被中断.请跟服务器管理员联系. 度了度,原来也是很常见的一种错 ...

  5. Bootstrap 学习（1）

    简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootst ...

  6. C++浅析——继承类中构造和析构顺序

    先看测试代码,CTEST 继承自CBase,并包含一个CMember成员对象: static int nIndex = 1; class CMember { public: CMember() { p ...

  7. [转]菜鸟程序员之Asp.net MVC Session过期异常的处理

    本文转自:http://www.cnblogs.com/JustRun1983/p/3377652.html 小赵是刚毕业的计算机专业方面的大学生,4年的大学时间里面,他读过了很多编程方面的数据,也动 ...

  8. 再不写，我怕就再也不写了-LAMP基础

    hi 经历了4天大餐的洗礼,整个人都思密达了...昨天的懒,是没有原因的懒,总之就是该提笔了亲 1.Ubuntu下的LAMP配置 -----Ubuntu基础知识----- ----管理员权限 出于安全 ...

  9. MMORPG大型游戏设计与开发（客户端架构 part5 of vegine）

    客户端异常捕获,是一件必然的事情,特别是在开发的时候就更需要这些有利于找出问题原因的捷径.区别于服务器的是,客户端基本上是以界面为主,你很难在正常运行程序的情况下进行一些输出的监视,如一些日志的记录. ...

  10. Stanford机器学习笔记-8. 支持向量机(SVMs)概述

    8. Support Vector Machines(SVMs) Content 8. Support Vector Machines(SVMs) 8.1 Optimization Objection ...