jquery如何实现吸顶导航效果

发布时间:2021-05-24 14:20:27 作者:小新
来源:亿速云 阅读:372

这篇文章主要介绍jquery如何实现吸顶导航效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

本文实例为大家分享了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是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件,是继Prototype之后又一个优秀的JavaScript代码库,能够用于简化事件处理、HTML文档遍历、Ajax交互和动画,以便快速开发网站。

以上是“jquery如何实现吸顶导航效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. UWP中如何使用Composition API实现吸顶
  2. 微信小程序实现吸顶特效

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

jquery

上一篇:jquery如何实现图片无缝滚动 蒙版遮蔽效果

下一篇:jQuery如何实现图片点击放大缩小功能

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》