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使用正则表达式去空字符的简单实现代码
May 20 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jQuery实现滚动效果
Nov 17 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
jquery添加div实现消息聊天框
Feb 08 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 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
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
由php的call_user_func传reference引发的思考
2010/07/23 PHP
一个PHP并发访问实例代码
2012/09/06 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
php定界符
2014/06/19 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
2017/01/16 PHP
jquery 表单进行客户端验证demo
2009/08/24 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
2013/02/01 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
JavaScript实现下拉列表
2021/01/20 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
Python实现对adb命令封装
2020/03/06 Python
Python 可视化神器Plotly详解
2020/12/26 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
自动化专业职业生涯规划书范文
2014/01/16 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
个人工作保证书
2015/02/28 职场文书
个人思想政治总结
2015/03/05 职场文书
结婚堵门保证书
2015/05/08 职场文书
外出培训学习心得体会
2016/01/18 职场文书
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js