<!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. 使用python+ffmpeg批量转换格式

    需求:  给定一个文件夹路径,遍历该文件夹内的所有文件以及子文件夹内的文件,当所有后缀名为wav格式的文件转换为ogg格式的文件. import os # 获取目录下的所有文件列表 import fn ...

  2. MHA-Atlas-MySQL高可用（下）

    MHA-Atlas-MySQL高可用(下) 链接:https://pan.baidu.com/s/17Av92KQnJ81Gc0EmxSO7gA 提取码:a8mq 复制这段内容后打开百度网盘手机App ...

  3. Linux的一些命令总结

    启动终端: ctr+alt+t 终端字体放大: ctr+shift+'+',终端字体缩小: ctr+'-' ls: 查看当前目录下的文件信息 pwd: 查看目录所在的路径 touch: 创建文件 mk ...

  4. 防火墙---CentOS

    1.查看防火墙状态 firewall-cmd --state 2.停止防火墙 systemctl stop firewalld.service 3.禁止开机启动防火墙 systemctl disabl ...

  5. Github pages博客搭建与域名绑定

    Github Page github page是由用户编写的托管在github上的静态网页,为了搭建一个个人博客,我们可以租用一个云服务器然后部署我们的博客项目,常见的比如wordpress,像wp这 ...

  6. Failed to bind properties under '' to com.zaxxer.hikari.Hikari DataSource Spring Boot解决方案

    Description: Failed to bind properties under '' to com.zaxxer.hikari.HikariDataSource: Property: dri ...

  7. 生产环境用到的几个有用的Linux命令

    有时候,几个有用的Linux命令可以很大的提高你的工作效率. 1.free -m 这个命令我暂时就只会这么使用,它可以查看服务器的内存资源 2.top 这个命令同样可以查看服务器的资源,当然我还是用它 ...

  8. css 导航样式

    html  结构 <div class="nav-menu float-r"> <ul class="menu-item"> <l ...

  9. 动态栈-------C语言

    使用带头结点的单链表实现 主要使用链表中的头插来实现栈的先进后出的特点 /***************************************************** Author:Si ...

  10. HIve分组查询返回每组的一条记录

    select a.lng,a.lat from (select row_number() over ( partition by uid,grid_id) as rnum,weighted_centr ...