web页面如何实现以下效果

Question

当一开始向上滑动页面时，视频区域跟随向上滑动，知道导航栏触到顶部，然后才开始内容滚动区域的滑动。
向下滑动时，只有滑到了内容滚动区域顶部之后，才让视频区域跟随向下滑动。

我更新一下问题哈：
一、如果内容滚动区域显示的内容太少，而无法滚动，如何实现图2；
二、注意有多个导航，每个导航是对应一个内容滚动区域的。如果导航1对应的内容滚动区域已经滑到了图2的效果，但当我点击导航2时，如果导航2对应的滚动区域的内容太少，是无法滚动的，那布局又变成图1了。

Answer 1

/* 思路：再写一个固定定位在最上边的导航nav，与你现在所写的导航nav一模一样。** 当未滑动一定距离时，隐藏固定定位的导航** 若是滑动过一定距离，就展示固定定位的导航。*/window.addEventListener('scroll', function() {    /* 更正一下，下面的navHight是导航nav的hight。    ** 不论你是写死数值，还是用js的api通过其dom来获取height属性。    ** 下面的40是举的例子，是写死的，为40px。*/    var navHight = 40    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop    /* this.$refs.nav 是vue的写法，指的是nav导航的dom。    ** 你也可以用document.getElementById等api来获取其dom。*/    var offsetTop = this.$refs.nav.offsetTop    /* scrollTop是滚动的高度，navHight上边已经解释。    ** 核心是offsetTop，不明白的可以console一下，就明白了。*/    if (scrollTop+navHight > offsetTop) {        // 展示固定定位的导航nav    } else {        // 隐藏固定定位的导航nav    }})

Answer 2

使用mescroll是最好的选择。