V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
eteled
V2EX  ›  前端开发

medium.com 这个页面是如何实现的?

  •  
  •   eteled · 2019-06-25 17:34:16 +08:00 · 3196 次点击
    这是一个创建于 1763 天前的主题,其中的信息可能已经有所发展或是发生改变。

    今天看到此页面 https://medium.com/s/not-another-first-time-story

    有点心动。自己动手,发现太菜,不能实现。

    左侧的图片“相对”是固定的,左侧滚动它不动;当左侧的列表滚动到底时,带起的 footer 竟也把左侧不动的图片带动起来了。请教各位这是如何实现的?

    7 条回复    2019-06-26 18:49:26 +08:00
    youweiks
        1
    youweiks  
       2019-06-25 17:37:54 +08:00
    左侧先 fixed 定位,然后监控页面滚动,当滚动到一定位置的时候,用 js 将左侧改为其他定位
    eteled
        2
    eteled  
    OP
       2019-06-25 17:44:59 +08:00
    @youweiks 说到 js,那我就沉默了。
    WittBulter
        3
    WittBulter  
       2019-06-25 17:46:08 +08:00
    google 云的文档和这个差不多,也是 js 实现的, 你也可以参考一下。
    eteled
        4
    eteled  
    OP
       2019-06-25 17:50:50 +08:00
    WittBulter
        5
    WittBulter  
       2019-06-25 17:55:01 +08:00
    @eteled 拉到底的时候控制了一下 footer,遮住左侧。
    原理差不多,都是检查一下到底了没然后触发一个 action 嘛
    hgc81538
        6
    hgc81538  
       2019-06-25 18:22:28 +08:00
    eteled
        7
    eteled  
    OP
       2019-06-26 18:49:26 +08:00
    @hgc81538 简直太棒了!感谢!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5383 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 08:51 · PVG 16:51 · LAX 01:51 · JFK 04:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.