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中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
jquery实现轮播图特效
Apr 12 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 中文处理函数集合
2008/08/27 PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
php实现通用的信用卡验证类
2015/03/24 PHP
PHP多态代码实例
2015/06/26 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
ArrayList类(增强版)
2007/04/04 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
bootstarp modal框居中显示的实现代码
2017/02/18 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
在Heroku云平台上部署Python的Django框架的教程
2015/04/20 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
python爬虫_实现校园网自动重连脚本的教程
2018/04/22 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
Tensorflow的梯度异步更新示例
2020/01/23 Python
基于Tensorflow批量数据的输入实现方式
2020/02/05 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
python如何实现word批量转HTML
2020/09/30 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
国富论读书笔记
2015/06/26 职场文书
初三英语教学反思
2016/02/15 职场文书