web頁面如何實(shí)現(xiàn)以下效果

圖片描述
當(dāng)一開始向上滑動(dòng)頁面時(shí)，視頻區(qū)域跟隨向上滑動(dòng)，知道導(dǎo)航欄觸到頂部，然后才開始內(nèi)容滾動(dòng)區(qū)域的滑動(dòng)。
向下滑動(dòng)時(shí)，只有滑到了內(nèi)容滾動(dòng)區(qū)域頂部之后，才讓視頻區(qū)域跟隨向下滑動(dòng)。

我更新一下問題哈：
一、如果內(nèi)容滾動(dòng)區(qū)域顯示的內(nèi)容太少，而無法滾動(dòng)，如何實(shí)現(xiàn)圖2；
二、注意有多個(gè)導(dǎo)航，每個(gè)導(dǎo)航是對應(yīng)一個(gè)內(nèi)容滾動(dòng)區(qū)域的。如果導(dǎo)航1對應(yīng)的內(nèi)容滾動(dòng)區(qū)域已經(jīng)滑到了圖2的效果，但當(dāng)我點(diǎn)擊導(dǎo)航2時(shí)，如果導(dǎo)航2對應(yīng)的滾動(dòng)區(qū)域的內(nèi)容太少，是無法滾動(dòng)的，那布局又變成圖1了。

回答

編輯回答

傻叼

使用mescroll是最好的選擇。

2018年9月14日 15:39

編輯回答

疚幼

應(yīng)該是你想要的效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scaleable=none;">
    <title>scroll test</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }

    .top {
        height: 200px;
        background-color: #000;
    }

    ul.bar {
        height: 40px;
        display: flex;
        align-items: center;
        background-color: #871;
        width: 100%;
    }

    ul.bar>li {
        flex: 1;
    }

    .bottom {
        height: 1000px;
        background-color: #eee;
    }

    </style>
</head>

<body>
    <div class="top">視頻區(qū)</div>
    <ul class="bar">
        <li>bar1</li>
        <li>bar2</li>
    </ul>
    <div class="bottom">內(nèi)容區(qū)</div>
    <script>
        var barEl = document.querySelector('.bar'),
                bottomEl = document.querySelector('.bottom')
                topEl = document.querySelector('.top')

        document.addEventListener('scroll', onScroll, false)

        function onScroll() {
            if (document.documentElement.scrollTop >= topEl.clientHeight) {
                barEl.style.position = 'fixed'
                barEl.style.top = '0'
                bottomEl.style.marginTop = barEl.clientHeight + 'px'
            } else {
                barEl.style.position = 'static'
                bottomEl.style.marginTop = '0'
            }
        }
    </script>
</body>

</html>

2018年2月27日 10:56

編輯回答

老梗

/* 思路：再寫一個(gè)固定定位在最上邊的導(dǎo)航nav，與你現(xiàn)在所寫的導(dǎo)航nav一模一樣。
** 當(dāng)未滑動(dòng)一定距離時(shí)，隱藏固定定位的導(dǎo)航
** 若是滑動(dòng)過一定距離，就展示固定定位的導(dǎo)航。*/
window.addEventListener('scroll', function() {
    /* 更正一下，下面的navHight是導(dǎo)航nav的hight。
    ** 不論你是寫死數(shù)值，還是用js的api通過其dom來獲取height屬性。
    ** 下面的40是舉的例子，是寫死的，為40px。*/
    var navHight = 40
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    /* this.$refs.nav 是vue的寫法，指的是nav導(dǎo)航的dom。
    ** 你也可以用document.getElementById等api來獲取其dom。*/
    var offsetTop = this.$refs.nav.offsetTop
    /* scrollTop是滾動(dòng)的高度，navHight上邊已經(jīng)解釋。
    ** 核心是offsetTop，不明白的可以console一下，就明白了。*/
    if (scrollTop+navHight > offsetTop) {
        // 展示固定定位的導(dǎo)航nav
    } else {
        // 隱藏固定定位的導(dǎo)航nav
    }
})

2018年2月1日 10:49

編輯回答

賤人曾

//寫一個(gè)與導(dǎo)航一樣的元素,fixed，但是display:none  擬為.daohang2
//獲取導(dǎo)航距頂部位置
var dheight = $('.daohang').offset().top;
//注冊滾動(dòng)事件
$(window).on('scroll',function(){
    if($(window).scrollTop()>dheight){
        $('.daohang2').css('display','block');
    }else{
        $('.daohang2').css('display','none');
    }

2018年8月3日 19:13