<!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. 理解EntityFramework两个核心类型的职责 DbSet和D'bContext

    DbSet与DbContext是多对一的关系DbSet是实体对象的集合,提供了实现CRUD的相应方法DbContext封装与数据库和数据模型相关的功能,依据数据实体状态创建SQL命令,将数据更改保存到 ...

  2. GitHub-Hexo-Blog 集成Gitalk评论插件

    在本文)末尾可查看先查看效果: 1. 新建New OAuth App 在github中,Settings / Develpoer settings OAuth Apps / New OAuth App ...

  3. elastic插件安装

    https://blog.csdn.net/dwyane__wade/article/details/80191131 参考这篇博文,唯一不同是,下面这一步可以不用,直接启动就行

  4. ios执行失去焦点，不执行点击事件

    原因:由于JavaScript为单线程,同一时间只能执行处理一个事件.“blur优先于click执行”.而在本示例中,由于blur处理程序,会将对下拉框展示区隐藏,所以导致其后续click事件并不会执 ...

  5. mysql莫名报"unknown column ... in 'on clause'"

    今天遇见个会诡异的问题 一个web程序本地调试的好好的,结果发布到服务器上程序就报错了,报"unknown column ... in 'on clause'",网上搜了下,说是m ...

  6. Python 十大装 B 语法解析

    Python 是一种代表简单思想的语言,其语法相对简单,很容易上手.不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了.本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并 ...

  7. Vue学习笔记【8】——在Vue中使用样式

    使用class样式 数组 <h1 :class="['red', 'thin']">这是一个邪恶的H1</h1> 2.数组中使用三元表达式 <h1 : ...

  8. PHP ftp_nb_fget() 函数

    定义和用法 ftp_nb_fget() 函数从 FTP 服务器上下载一个文件并保存到本地一个已经打开的文件中.(无阻塞) 该函数返回下列值之一: FTP_FAILED(发送/获取失败) FTP_FIN ...

  9. 对称性——cf405d

    以后碰到这种题就应该往对称性想:设x的对称数x‘是1e6-x+1 对于任意一组对称数x+x'-2=1e6-1,2e6-(x+x')=1e6-1,即X集合Y集合同时加上任意一组对称数都是可以的 枚举每个 ...

  10. DNS域名服务器的搭建

    父域的DNS(svr7): 可以解析父域名下保存的域名地址,即解析.tedu.cn下的域名 一.安装软件包bind.bind-chroot   bind是DNS解析服务需要用到的服务软件包,bind- ...