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 相关文章推荐
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 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调用数据库的存贮过程!
2006/10/09 PHP
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
PHP加密函数 Javascript/Js 解密函数
2013/09/23 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
php中session与cookie的比较
2015/01/27 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
javascript控制swfObject应用介绍
2012/11/29 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
AngularJS 视图详解及示例代码
2016/08/17 Javascript
Js动态设置rem来实现移动端字体的自适应代码
2016/10/14 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
node使用request请求的方法
2019/12/20 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
详谈python http长连接客户端
2017/06/12 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
python判断无向图环是否存在的示例
2019/11/22 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
python让函数不返回结果的方法
2020/06/22 Python
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
生物科学专业个人求职信范文
2013/12/07 职场文书
正规的求职信范文分享
2013/12/11 职场文书
食堂个人先进事迹
2014/01/22 职场文书
初中语文教学反思
2014/02/02 职场文书
初中作文评语大全
2014/04/23 职场文书
运动会方阵口号
2014/06/07 职场文书
爱的承诺书
2015/01/20 职场文书
财务人员个人工作总结
2015/02/27 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
如何用六步教会你使用python爬虫爬取数据
2022/04/06 Python
《仙剑客栈2》第一弹正式宣传片公开 年内发售
2022/04/07 其他游戏