<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style>

             #box2 {

                 width: 100%;

                 height: 60px;

                 background: rgba(222,222,100, 0.6);

             }

         </style>

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

         <script>

             $(function(){

                 var box2Top = $("#box2").offset().top;

                 console.log(box2Top);

                 //页面滚动

                 $(window).scroll(function(){

                     var scrollTop = $(window).scrollTop();

                     if (scrollTop >= box2Top) {

                         $("#box2").css({"position": "fixed", top:0}); //固定定位

                     }

                     else {

                         $("#box2").css({position: "static"});

                     }

                 })

             })

         </script>

     </head>

     <body>

         <div id="box1">box1

             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

         </div>

         <div id="box2">box2</div>

         <div id="box3"> box3

             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

         </div>

     </body>

 </html>

效果2

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style>

             #box3 {

                 width: 100%;

                 height: 60px;

                 background: rgba(222,222,100, 0.6);

                 position: fixed;

                 top: 0;

                 display: none;

             }

         </style>

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

         <script>

             $(function(){

                 $(window).scroll(function(){

                     var scrollTop = $(window).scrollTop();

                     if ( scrollTop >= $("#box2").offset().top ) {

                         $("#box3").fadeIn(); //淡入

                     }

                     else {

                         $("#box3").fadeOut(); //淡出

                     }

                 })

             })

         </script>

     </head>

     <body>

         <div id="box1">box1

             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

         </div>

         <div id="box2">box2

             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

         </div>

         <div id="box3">box3</div>

     </body>

 </html>

jq-demo-2种吸顶效果的更多相关文章

  1. 自定义tab吸顶效果一（原理）

    PS:问题:什么是吸顶,吸顶有什么作用,吸顶怎么使用? 在很多app商城中,介绍软件的时候就会使用吸顶效果, 吸顶有很多作用,一个最简单粗暴的作用就是,让用户知道此刻在浏览哪个模块,并可以选择另外的模 ...

  2. 基于scroll的吸顶效果

    本次要实现的是一种常见的网页效果,如下: 页面由头部,导航,主体内容三部分组成,当页面发生滚动时,头部逐渐隐藏,导航部分向上移动,直到导航部分距离浏览器顶部为零时,导航部分固定不动,保持吸顶效果,如下 ...

  3. better-scroll之吸顶效果巨坑挣扎中

    今天和大家分享下better-scroll这款移动端用来解决各种滚动需求的插件(目前已经支持PC) 关于其中的API大家可以去官网看下  这里就给大家介绍几种常用的以及需要注意的点是什么 首先说一下b ...

  4. css sticky & 吸顶效果

    css sticky & 吸顶效果 demo https://codepen.io/xgqfrms/pen/PoqyVYz css position sticky not working ht ...

  5. Html吸顶效果

    Html吸顶效果 一.HTML HTML中需要给div一个id <!DOCTYPE html> <html lang="en"> <head> ...

  6. js之吸顶效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. react.js中实现tab吸顶效果问题

    在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab ...

  8. [RN] React Native 头部 滑动吸顶效果的实现

    React Native 头部 滑动吸顶效果的实现 效果如下图所示: 实现方法: 一.吸顶组件封装 StickyHeader .js import * as React from 'react'; i ...

  9. Vue 事件监听实现导航栏吸顶效果（页面滚动后定位）

    Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...

随机推荐

  1. 单链表的java实现

    class LNode { public LNode next; public int data; } class Lianbiao { private static LNode head = new ...

  2. 整合mybatis时报错：Configuration problem: Unable to locate Spring NamespaceHandler for XML schema namespace [http://www.springframework.org/schema/tx]

    org.springframework.beans.factory.parsing.BeanDefinitionParsingException: Configuration problem: Una ...

  3. 忘记mysql超户密码的解决方法

    本文章针对用yum安装的mariadb数据库,如果是tar包安装的mysql数据库,只是数据库命令的关闭启动方式不同而已. 方法一:[root@localhost ~]# killall -u mys ...

  4. 9、Python 连接 PostgreSQL数据库 -- psycopg2

    1.cmd  pip install psycopg2 -- 提示错误信息 2.pip show pip   -->查看当前pip版本 3.python -m pip install --upg ...

  5. spark window本地运行wordcount错误

    在运行本地运行spark或者hadoop代码时可能会遇到一下三种问题   1.Exception in thread "main" java.lang.UnsatisfiedLin ...

  6. Mysql学习笔记（001）-常见命令

    常见命令 SHOW DATABASES; /* use test; create database myemployees; use myemployees; create table employe ...

  7. Vue学习笔记【14】——自定义指令

    1.自定义全局和局部(私有)自定义指令 // 自定义全局指令 v-focus,为绑定的元素自动获取焦点: ​ Vue.directive('focus', { ​ inserted: function ...

  8. git——修改已经提交并push后的commit注释

    把代码push到远程后,发现commit的注释居然多了几个错别字,不行,必须改了! 搜索了一些答案之后自己做了一个总结如下: ①修改倒数第次的commit 指令:$ git rebase -i HEA ...

  9. 树分基础 bzoj 1468

    我们对于一棵树,我们找一个根,然后统计过这个点的路径有多少符合要求.怎么搞呢?我们可以先维护一个数据结构,然后把先把根作为一个距离自己为0的点放进去,然后对于每一棵子树,先找出所有的与之前的数据结构的 ...

  10. 如何使用android-support-V7包中ActionBar（Eclipse版）

    $*********************************************************************************************$ 博主推荐 ...