<!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. react中替换关键字并且高亮显示的方法

    在react项目中,将关键字高亮显示 : 首先封装一个方法,只需要传入('要检索的内容','检索的关键字','给内容中的关键字加上的有特殊标记的标签名')这三个参数即可高亮显示关键字.详见:https ...

  2. 2018-12-2-C#-Span-入门

    title author date CreateTime categories C# Span 入门 lindexi 2018-12-02 11:32:46 +0800 2018-06-18 11:1 ...

  3. 停止node进程

    运行vue-cli项目的时候经常出现端口号占用,npm run dev报错的信息, 此时可通过任务管理器粗暴的杀死node进程,也可以通过cmd检测占用某个端口的程序,进而杀死该进程,步骤如下: 1. ...

  4. BiLSTM介绍

    https://www.jiqizhixin.com/articles/2018-10-24-13 (机器之心)

  5. Oracle 一个表的数据update到另一个表

    A表数据 B表数据         现在要把B表 B_COSTS 的值update到A表 A_COSTS 字段 SQL语法: update a set (a.a_costs) = (select b. ...

  6. HDU-5215 Cycle 无向图判奇环偶环

    题意:给一个无向图,判断这个图是否存在奇环和偶环. 解法:网上有一种只用dfs就能做的解法,但是我不太理解. 这里用的是比较复杂的.首先奇环很简单可以用二分图染色判断.问题是偶环怎么判断?这里我们想, ...

  7. 第3篇K8S集群部署

      一.利用ansible部署kubernetes准备: 集群介绍 本系列文档致力于提供快速部署高可用k8s集群的工具,并且也努力成为k8s实践.使用的参考书:基于二进制方式部署和利用ansible- ...

  8. redis - 环境搭建(转)

      一:简介(来自百科) redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合)和zse ...

  9. vue-cli构建的项目中请求代理与项目打包

    vue-cli构建的项目中,生产模式下的打包路径.与生产模式下的请求代理简单示意

  10. 【leetcode】967. Numbers With Same Consecutive Differences

    题目如下: Return all non-negative integers of length N such that the absolute difference between every t ...