• 仿京东,天猫 左边侧栏固定,右侧楼层滚动事件


    效果图如下:

    1.布局

    分两部分来布局的:左边,右边

    html:

    2.css

    左边部分:

    右边部分:

    js部分:

    通过上面:需求是有三个大标题的:一是:优惠专区,特价专区,新品专区

    在html里面种,我会给这个每个大标题用一个div包裹着,然后用js获取他们每个div的高度,注意是每个专区都要获取高度的。

    js截图已经很清晰了。

    1.首先给 “ 窗口”  添加   “滚动事件”,然后获取 “ 窗口滚动上去” 的距离。

    2.然后获取不同专区的高度

    3.进行判断:

       3.1 条件应该在:0<  div 1<  div1.height+400   (400是因为有banner图);

       开始先让它显示    左边的部分 ,所以它会在以上条件上显示;

       3.2 条件应该在:div1.height+400 <  div 2<  div2.height*2-400 ;这个地方为什么乘于2呢,因为这个的判断距离是根据上一级的高度来添加的。

       3.3 条件应该在: div2.height*2-400 <  div 2<   div2.height*3 ;这个地方为什么乘于3呢,因为这个的判断距离是根据上一级的高度来添加的。

       3.4 条件应该ling<400,左边的部分隐藏,是因为以上来就不可能显示,所以应该在小于400的时候,就是在banner图那部分就隐藏了。

              往下拉动,也是应该隐藏

  • 相关阅读:
    替换掉一段 以 $ 开头 $ 结尾 的字符串
    react 中使用 codemirror2(在线代码编辑器)读取 yaml 文件
    第四篇:前端读取文件 | FileReader 对象及其属性
    umi 如何使用 Mock 模拟数据
    loading 动画 系列
    网站页面上标签页小图标的添加方式
    Linux tail命令
    Python实现字符串反转的方法
    Redis 配置远程访问
    消息队列
  • 原文地址:https://www.cnblogs.com/hld88/p/7286759.html
Copyright © 2020-2023  润新知