移动端吸顶效果

发表于 | 更新于 | 阅读次数 1
移动端自动吸顶效果，区分iOS和安卓

在开发移动端的时候，经常需要对tab做吸顶效果处理。

吐槽一下~ 有些程序员明知道增加吸顶效果对用户更加友好却嫌麻烦不加，非得产品经理提需求。

一个好的程序员应该再看见tab的时候就会想到这些，而不用等产品经理来提醒。开发产品的时候应该多站在用户的角度去思考问题，而不是首先考虑代码的实现。

好了，废话不多说，开始看代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="banner"></div>

<div class="tab-content" id="tabContent">
  <ul class="tab-box" id="tabBox">
    <li>精选</li>
    <li>推荐</li>
    <li>活动</li>
  </ul>
</div>

<div class="main">
  
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var ua = window.navigator.userAgent.toLowerCase();
var isIos = /iphone|ipod|ipad/ig.test(ua)

if (isIos) { // iOS使用 sticky属性
  $('#tabContent').addClass('position-sticky'); // 操作外层
} else {
  var tabOffsetTop = $('#tabBox').offset().top; // tab 距离头部的高度（定值）
  $(window).on('scroll', () => {
    const scrollTop = $(window).scrollTop(); // 当前滚动条的高度（变值）
    if (scrollTop >= tabOffsetTop) {
      $('#tabBox').addClass('position-fix'); // 安卓操作内层div，外层div用于占位（此处占位的div很有必须）
    } else {
      $('#tabBox').removeClass('position-fix');
    }
  });
}

特别提示：安卓在滚动顶部的时候设置为fix定位，此时必须有个div占位，否则占位突然消失，可能会造成bug

完整代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
  <title>移动端吸顶效果</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .banner{
      height: 160px;
      background: #eee;
      margin-bottom: 20px;
    }
    .tab-content{
      width: 100%;
      background: #ddd;
      height: 50px;
      margin-bottom: 20px;
    }
    .tab-box{
      background: #ddd;
      width: 100%;
      overflow: hidden;
      height: 50px;
      line-height: 50px;
    }
    .tab-box li {
      display: inline-block;
      width: 33.33%;
      float: left;
      text-align: center;
    }
    .main{
      background: #eee;
    }
    .main p {
      line-height: 100px;
    }


    .position-sticky{
      position: -webkit-sticky;
      position: sticky;
      top: 0px;
      z-index: 1;
    }
    .position-fix{
      position: fixed;
      left: 0;
      top: 0px;
      z-index: 1;
    }
  </style>
</head>
<body>
  <div class="banner"></div>

  <div class="tab-content" id="tabContent">
    <ul class="tab-box" id="tabBox">
      <li>精选</li>
      <li>推荐</li>
      <li>活动</li>
    </ul>
  </div>

  <div class="main">
    <p>1sdsdsd</p>
    <p>1sdsdsd</p>
    <p>1sdsdsd</p>
    <p>1sdsdsd</p>
    <p>1sdsdsd</p>
    <p>1sdsdsd</p>
    <p>1sdsdsd</p>
    <p>1sdsdsd</p>
    <p>1sdsdsd</p>
    <p>1sdsdsd</p>
    <p>1sdsdsd</p>
    <p>1sdsdsd</p>
    <p>1sdsdsd</p>
    <p>1sdsdsd</p>
  </div>

  <script src="./js/jquery-2.1.4.js"></script>
  <script>
    $(function () {
      var ua = window.navigator.userAgent.toLowerCase();
      var isIos = /iphone|ipod|ipad/ig.test(ua);
      
      if (isIos) { // iOS使用 sticky属性
        $('#tabContent').addClass('position-sticky');
      } else {
        var tabOffsetTop = $('#tabBox').offset().top; // tab 距离头部的高度（定值）
        $(window).on('scroll', () => {
          const scrollTop = $(window).scrollTop(); // 当前滚动条的高度（变值）
          if (scrollTop >= tabOffsetTop) {
            $('#tabBox').addClass('position-fix'); // 安卓操作内层div，外层div用于占位
          } else {
            $('#tabBox').removeClass('position-fix');
          }
        });
      }
    });
  </script>
</body>
</html>