<!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. js 添加节点dom

    var elemet = document.createElement("p"); var attr=document.createAttribute("align&qu ...

  2. C++之STL一般总结

    重新复习一下STL 什么是STL? STL(模板和标准模板库),实现与类型无关的算法和数据类型,需要将实现中的类型参数化,允许用户根据它的需要制定不同的类型. 一.一般介绍 STL(Standard ...

  3. 在JazzyViewPager中调用其它layout布局xml并使用

    开源地址:https://github.com/jfeinstein10/JazzyViewPager 发现网上的例子使用的是直接创建的一个TextView来做的.但是实际上使用,不可能只有这一个控件 ...

  4. [uwsgi] no request plugin is loaded, you will not be able to manage requests.

    Problem: *** Operational MODE: preforking+threaded no app loaded. going in full dynamic mode uWSGI i ...

  5. unp TCP 客户端服务器回射程序中对SIGCHLD信号的处理

    第五章中,有一个例子模拟客户端并发的终止TCP连接,服务器捕捉并处理SIGCHLD信号并调用waitpid函数防止僵死进程的出现.信号处理函数中核心的一句是: , &statloc, WNOH ...

  6. 记一次ganglia的故障分析 mem_report不显示

    ganglia集群中mem_report不能正确显示,有的显示有些不显示. 我通过web开发工具F12,获取生成图片的路径,然后加上&debug=3 显示发现: No matching met ...

  7. Appium学习实践（一）简易运行Appium

    环境: Appium 1.4.13 OS X  10.10.5 真机已安装app,或者未安装,通过ipa文件来安装,并启动Appium Inspector 点击Appium中的放大镜后,自动运行App ...

  8. 第8章 用户模式下的线程同步（2）_临界区（CRITICAL_SECTION）

    8.4 关键段(临界区)——内部也是使用Interlocked函数来实现的! 8.4.1 关键段的细节 (1)CRITICAL_SECTION的使用方法 ①CRITICAL_SECTION cs;   ...

  9. Ajax与jQuery、json

    一.Ajax简介 Ajax(Asynchronous JavaScript and Xml)--异步刷新技术 Ajax的关键元素包括以下内容: ① JavaScript语言:Ajax技术的主要开发语言 ...

  10. 向tiny6410移植tslib（tslib-1.4）

    环境:RedHat 已安装交叉编译器 tslib版本:1.4 首先在redhat文件系统的/usr/local/tslib 创建目录 拷贝源代码tslib-1.4.tar.gz到/usr/local/ ...