<!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爬取读者文摘杂志

    java爬虫入门实战练习 此代码仅用于学习研究 此次练习选择了读者文摘杂志网站进行文章爬取 练习中用到的都只是一些简单的方法,不过过程中复习了输入流输出流的使用以及文件的创建写入等知识,对自己还是有所 ...

  2. springboot集成redis报错-ClassNotFoundException: org.apache.commons.pool2.impl.GenericObjectPoolConfig

    当使用Springboot 2.0以上版本集成redis的时候遇到报错信息如下: Application run failed org.springframework.beans.factory.Un ...

  3. HDU-4044 树形背包dp好题

    不会做,题解是参考网上的.感觉这道题是到好题,使得我对树形背包dp更了解了. 有几个注意的点,直接给出代码,题解以及注意点都在注释里了. #include<bits/stdc++.h> u ...

  4. 写MySQL存储过程实现动态执行SQL

    转自:http://www.cnblogs.com/william-lin/archive/2013/03/19/2968727.html--存储过程名和参数,参数中in表示传入参数,out标示传出参 ...

  5. day04 python列表 元组 range()

    day04 python   一.列表 1.什么是列表     列表是可变的数据类型: 和字符串不同, 做的操作直接改源数据     列表由[]来表示, 每项元素用逗号隔开.列表什么都能装,能装对象的 ...

  6. Dubbo---zookeeper 注册中心---xml配置

    1.项目结构(maven项目) 2.pom <?xml version="1.0" encoding="UTF-8"?> <project x ...

  7. 【JavaWeb项目】一个众筹网站的开发（七）后台用户菜单

    mvn命令不能运行: jar-war-pom之间是可以直接写,优先找这个工程,而不是仓库的位置 pom-pom子父关系,需要去仓库中找,我们需要使用<relativePath>../pro ...

  8. git——commit之后一直出现一个>

    在网上搜了半天,也没见过有类似的情况,忘记具体是怎么解决的了,我记得是重新add了一遍,再commit就OK了 更新: 感谢@月下初拥的评论,找到了原因,可能是由于commit的注释结构有误造成的,比 ...

  9. css3布局篇（双飞翼）

    大家看到好多电商网站都见过经典三列布局,它也叫做圣杯布局 ,是Kevin Cornell在2006年提出的一个布局模型概念,这个在国内最早是由淘宝UED的工程师传播开来,在中国也有叫法是双飞翼布局,它 ...

  10. RichViewEdit

    RichViewEdit特殊操作 RichviewEdit 图文保存操作 首先要转换成stream后才能对RichviewEdit进行正确的读和写 function SaveRVFToField(rv ...