4 回答

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
}
})
添加回答
舉報(bào)