Web APIs——案例

1、仿京东固定导航栏案例

需求:当页面滚动到秒杀模块,导航栏自动滑入,否则滑出

分析:

        ①:用到页面滚动事件

        ②:检测页面滚动大于等于 秒杀模块的位置 则滑入,否则滑出

        ③:主要移动的是秒杀模块的顶部位置





    
    
    
    Document
    



    
我是顶部导航栏
秒杀模块

2、电梯导航案例

需求:点击不同的模块,页面可以自动跳转不同的位置

模块分析:

        ①:页面滚动到对应位置,导航显示,否则隐藏模块

        ②:点击导航对应小模块,页面会跳到对应大模块位置

        ③:显示隐藏电梯盒子和返回顶部已经完成,可以放到自执行函数里面,防止遍历污染

        ④:电梯模块单独放到自执行函数里面

        ⑤:点击每个模块,页面自动滚动到对应模块,使用事件委托方法更加简单

        ⑥:页面滚动到对应位置,电梯导航对应模块自动发生变化

        ⑦:显示隐藏电梯盒子和返回顶部已经完成,可以放到自执行函数里面,防止变量污染

 模块分析2:

        ①:点击小模块,当前添加active这个类

        ②:解决处理初次获取不到active报错的问题

        解决方案:

        ①:不能直接获取这个类,然后移除,这样会报错

        ②:先获取这个类,然后加个判断

                如果有这个类,就移除

                如果没有这个类,返回为null,就不执行移除,就不报错了

        ③:点击每个模块,页面自动滚动到对应模块,使用事件委托方法更加简单

 点击小盒子li,页面跳转到对应大盒子位置

核心思想:把对应大盒子的offsetTop 给document.documentElement.scrollTop

        ①:我们发现小盒子li的自定义属性里面值 跟 大盒子 后面一致

        ②:利用模板字符串 把点击的 自定义属性值 给 大盒子,就找到对应的大盒子了

        ③:然后拿到这个大盒子的offsetTop 值 给 document.documentElement.scrollTop即可

模块分析3:页面滚动到大盒子位置,电梯导航小盒子对应模块自动处于选中状态

        ①:当页面滚动了,先移除所有小li 里面a 的状态 active 防止有多个 active

        ②:因为页面滚动需要不断获取大盒子的位置,所以需要把所有的大盒子都获取过来

        ③:开始进行滚动判断

                如果页面滚动大于 新鲜好物大盒子的offsetTop 并且小于 人气推荐盒子的offsetTop 就把 对应的小盒子先出来添加类

                依次类推

                最后一个,如果大于等于最新专题模块,就选出最后一个对应小盒子(更精确)

        





  
  小兔鲜儿 - 新鲜 惠民 快捷!
  
  
  
  



  
  
  
  
  
  

热门品牌国际经典 品质保证

你可能感兴趣的:(JavaScript,html,前端)