移动端HTML5导航栏吸顶：IOS（sticky）和Android两种实现方式

最新推荐文章于 2023-04-17 11:24:22 发布

晓凤凤

最新推荐文章于 2023-04-17 11:24:22 发布

阅读量1.2k

点赞数

分类专栏： JavaScript

原文链接：https://blog.csdn.net/newbietao/article/details/77944205

版权

JavaScript 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

本文链接： https://blog.csdn.net/newbietao/article/details/77944205

一、前言

吸顶效果是web开发中一种常见的交互方式，常见的应用场景有导航、搜索框等等。（图片来自其他博客，感谢博主）

sticky

二、在移动端开发遇到的问题

吸顶效果的基本的开发思路，利用scroll事件进行监听scrollTop的值，当scrollTop达到一定的值得时候设置吸顶元素的position : fixed;属性。但是问题是：安卓支持scroll事件和fixed属性，但是ios8.0的scroll事件不是连续触发的，只会在scroll事件结束后触发一次scroll事件，同时ios还不支持设置fixed属性。

Ios支持position: sticky 可以很好的解决这个问题，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。

可以知道sticky属性有以下几个特点：

该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。

当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量

三、解决思路

1.检测客户端是安卓系统还是ios系统。

2.如果是安卓系统添加scroll事件监听

3.如果是ios系统添加position: sticky


 
 
   
   
    
    
   
   
   
   
    
    
     
     <!DOCTYPE html>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <html lang="en">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <head>
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     <meta charset="UTF-8">
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     <title>pc sticky
     
     </title>
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     <style>
     
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         * {
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     margin: 
     
     0;
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     padding: 
     
     0;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         }
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     .banner {
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     height: 
     
     200px;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         }
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     .nav {
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     height: 
     
     40px;
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     background-color: skyblue;
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     border: 
     
     1px solid silver;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         }
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     .sticky {
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     /*滚过初始位置时自动吸顶*/
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     position: -webkit-sticky;
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     position: sticky;
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     /*吸顶时的定位*/
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     top: 
     
     0;
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     left: 
     
     0;
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     /*z比下方所有z高*/
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     z-index: 
     
     9999;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         }
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     .content {
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     height: 
     
     1500px;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         }
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     .fixed-top {
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     position: fixed;
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     width: 
     
     100%;
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     left: 
     
     0;
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     top: 
     
     0;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         }
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     </style>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </head>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <body>
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     <div class="banner">Banner图
     
     </div>
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     <div class="nav">吸顶元素
     
     </div>
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     <div class="content">很长的内容
     
     </div>
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     <script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js">
     
     
     
     </script>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <script>
     
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     var stickyEl = 
     
     document.querySelector(
     
     '.nav');
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     function fixed(num) {
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     var u = navigator.userAgent;
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     var isAndroid = u.indexOf(
     
     'Android') > 
     
     -1 || u.indexOf(
     
     'Adr') > 
     
     -1; 
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     var isiOS = !!u.match(
     
     /\(i[^;]+;( U;)? CPU.+Mac OS X/); 
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     if(isAndroid) {
    
    
   
   

   
   
    
    
   
   
   
   
    
                
     
     document.body.onscroll = 
     
     function(e) {
    
    
   
   

   
   
    
    
   
   
   
   
    
                    
     
     var scrollT = 
     
     document.body.scrollTop;
    
    
   
   

   
   
    
    
   
   
   
   
    
                    
     
     if (scrollT > num) {
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                         $(stickyEl).addClass(
     
     'fixed-top');
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     }
     
     else {
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                         $(stickyEl).removeClass(
     
     'fixed-top');
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 };
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             }
     
     else 
     
     if(isiOS) {
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 $(stickyEl).addClass(
     
     'sticky');
    
    
   
   

   
   
    
    
   
   
   
   
    
                
     
     console.log(
     
     11);
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         fixed(
     
     200);
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </script>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </body>