第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會有你想問的

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

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

哈士奇WWW 2019-03-05 13:15:39
當(dāng)一開始向上滑動頁面時(shí),視頻區(qū)域跟隨向上滑動,知道導(dǎo)航欄觸到頂部,然后才開始內(nèi)容滾動區(qū)域的滑動。向下滑動時(shí),只有滑到了內(nèi)容滾動區(qū)域頂部之后,才讓視頻區(qū)域跟隨向下滑動。我更新一下問題哈:一、如果內(nèi)容滾動區(qū)域顯示的內(nèi)容太少,而無法滾動,如何實(shí)現(xiàn)圖2;二、注意有多個(gè)導(dǎo)航,每個(gè)導(dǎo)航是對應(yīng)一個(gè)內(nèi)容滾動區(qū)域的。如果導(dǎo)航1對應(yīng)的內(nèi)容滾動區(qū)域已經(jīng)滑到了圖2的效果,但當(dāng)我點(diǎn)擊導(dǎo)航2時(shí),如果導(dǎo)航2對應(yīng)的滾動區(qū)域的內(nèi)容太少,是無法滾動的,那布局又變成圖1了。
查看完整描述

4 回答

?
函數(shù)式編程

TA貢獻(xiàn)1807條經(jīng)驗(yàn) 獲得超9個(gè)贊

/* 思路:再寫一個(gè)固定定位在最上邊的導(dǎo)航nav,與你現(xiàn)在所寫的導(dǎo)航nav一模一樣。

** 當(dāng)未滑動一定距離時(shí),隱藏固定定位的導(dǎo)航

** 若是滑動過一定距離,就展示固定定位的導(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是滾動的高度,navHight上邊已經(jīng)解釋。

    ** 核心是offsetTop,不明白的可以console一下,就明白了。*/

    if (scrollTop+navHight > offsetTop) {

        // 展示固定定位的導(dǎo)航nav

    } else {

        // 隱藏固定定位的導(dǎo)航nav

    }

})


查看完整回答
反對 回復(fù) 2019-03-19
?
Qyouu

TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超11個(gè)贊

使用mescroll是最好的選擇。


查看完整回答
反對 回復(fù) 2019-03-19
  • 4 回答
  • 0 關(guān)注
  • 555 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號