zoukankan      html  css  js  c++  java
  • 浏览器惯性滚动下如何实现导航栏吸顶!

    浏览器惯性滚动下如何实现导航栏吸顶!

    1.最近项目中有这样一个需求:当页面向下滚动到一定位置时,需要把介绍商品的两个导航栏(商品介绍,注意事项)做吸顶处理

    顺理成章会想到监听浏览器滚动条的位置,一旦到达导航栏的位置,就对它进行吸顶.那么问题来了,怎么监听滚动呢?

    这里可以想到两个方法:


    1.监听touchmove事件;

    2.window.addEventListener('scroll',callback);

    先说说第一种方法,手指在手机屏幕上滑动就会触发,但是对于绝大多数手机来说,当我们手指滑动一段距离之后,即使抬起了手指,网页也会有一段惯性滑动,然而遗憾的是,这段惯性滑动不会触发touchmove,也不会触发touchend事件.这样就可能导致我们无法及时监听到滚动条的正确位置,从而在第一时间对导航栏进行置顶.

    再说说第二种方法:这种方法的好处在于它能够监听浏览器的惯性滚动,这样我们可以实时拿到正确的滚动条位置.但是这种方法也有一些弊端,那就是在ios上,浏览器在滚动期间,不会触发callback里面的函数,只有在scroll结束时,才会触发,但android上表现还算正常.所以综上所述,我才用了如下方法实现我的吸顶:

    针对ios,可以使用css3的一个新属性:position:sticky,-webkit-sticky;给咱们需要吸顶的标签设置上这个属性,一旦当屏幕滚动到这个元素的位置时,它会立马吸顶,无需其它的js操作,着实太方便了.但是目前安卓尚未支持此属性.

    针对android,就用window.addEventListener('scroll',callback);当滚动条的位置达到临界点时,就让导航栏吸顶即可.

  • 相关阅读:
    ZENCART 在文本格式郵件中轉換貨币符号
    ZENCART contact us 收不到邮件的问题
    zencart 如何修改在线人数和订单编号
    19.Oracle的动态监听和静态监听
    16.查看ORACLE的SAG和PGA的使用率
    1.Rman备份的基本命令
    4.ASM常用命令汇总
    2.Rman 备份、检查、维护、恢复
    2.oracle的备份和恢复之expdp和impdp命令02
    17.sqlnet.ora文件
  • 原文地址:https://www.cnblogs.com/Ricky-Huang/p/6871861.html
Copyright © 2011-2022 走看看