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是最好的选择。