jquery实现吸顶导航效果


Posted in jQuery onJanuary 08, 2020

本文实例为大家分享了jquery实现吸顶导航效果的具体代码,供大家参考,具体内容如下

css:

*{margin:0;padding:0;}
 body{
 margin:0 auto;
   max-width:10rem;
 }
 header{
 width:10rem;
 height:1rem;
 background:red;
 position:fixed;
 top:0;
 left:auto;
 }
 section{
 height:100%;
 overflow: auto;
 padding:1rem 0;
 }
 .bananers{
 width:100%;
 height:3rem;
 text-align: center;
 line-height:3rem;
 background: aqua;
 }
 .mains{
 width:100%;
 height:1rem;
 background:red;
 display: flex;
 }
 .mains>div{
 width:100%;
 height:100%;
 border:1px solid #dddddd;
 display: flex;
 align-items: center;
 justify-content: center;
 }
 .contents{
 width:100%;
 }
 .contents>div{
 height:50px;
 line-height:50px;
 padding-left:10%;
 border-bottom:1px solid red;
 }
 footer{
 width:10rem;
 height:1rem;
 background: #0086B3;
 position:fixed;
 left:auto;
 bottom:0;
 }
  .fixed-top {
    position: fixed;
    width: 100%;
    top:1rem;
    left:auto;
  }
  .sticky {
    position: -webkit-sticky;/*滚过初始位置时自动吸顶*/
    position: sticky;/*吸顶时的定位*/
    top:1rem;
    left:auto;
    z-index: 999;/*z-index比下方所有层级要高*/
  }

html:

<header>头部</header>
<section>
  <div class="bananers">内容</div>
  <div class="mains">
  <div>导航1</div>
  <div>导航2</div>
  <div>导航3</div>
  </div>
  <div class="contents"></div>
</section>
<footer>页脚</footer>

js:

for(var i=0;i<20;i++){
 $(".contents").append(`<div>${i+1}</div>`)
 }
 var headers=$("header")[0].getBoundingClientRect().height;
 var mains=$(".mains").offset().top;
 var heights=mains-headers;
 $(".bananers").html(mains+"----"+headers);
 var tops = document.querySelector('.mains');
 function fixed(num) {
    var nys= navigator.userAgent;
    var isAndroid = nys.indexOf('Android') > -1 || nys.indexOf('Adr') > -1; 
    var isIOS = !!nys.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); 
    if(isAndroid) {
      document.body.onscroll = function(e) {
        var scrollT = document.body.scrollTop;
        if (scrollT > num) {
          $(tops).addClass('fixed-top');
        }else {
          $(tops).removeClass('fixed-top');
        }
      };
    }else if(isIOS) {
      $(tops).addClass('sticky');
    }
  }
fixed(heights);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 #jQuery
详解jQuery中的prop()使用方法
Jan 05 #jQuery
jQuery 选择器用法基础入门示例
Jan 04 #jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 #jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 #jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 #jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 #jQuery
You might like
PHP 实用代码收集
2010/01/22 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
php从字符串创建函数的方法
2015/03/16 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
jQuery返回定位插件详解
2017/05/15 jQuery
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
Python 详解基本语法_函数_返回值
2017/01/22 Python
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
Python饼状图的绘制实例
2019/01/15 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
乐高西班牙官方商店:LEGO Shop ES
2019/12/01 全球购物
付款委托书范本
2014/04/04 职场文书
文明礼仪标语
2014/06/13 职场文书
签字仪式主持词
2015/07/03 职场文书
uniapp 微信小程序 自定义tabBar 导航
2022/04/22 Javascript