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使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 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+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
PHP变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
通过Email发送PHP错误的方法
2015/07/20 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
浅谈Vue.js
2017/03/02 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
python使用mysql数据库示例代码
2017/05/21 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
Django使用rest_framework写出API
2020/05/21 Python
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
一套比较完整的软件测试人员面试题
2012/05/13 面试题
高中教师评语大全
2014/04/25 职场文书
社区文艺活动方案
2014/08/19 职场文书
办理房产证委托书
2014/09/18 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
2016年教师党员创先争优承诺书
2016/03/24 职场文书