TA貢獻1995條經驗 獲得超2個贊
可以看到這個頁面是用 React 寫的，所以你需要安裝 React Developer Tools 這個插件。
實現這個效果的是 <ScrollOverPack /> 這個組件：
發現有個 scrollEvent（props.scrollEvent()） 函數，應該就是這個函數控制的。
控制臺輸入 $r.props.scrollEvent：
之后就可以看到實現的函數：
function onScrollEvent(e) { var clientHeight = document.documentElement.clientHeight;
var header = document.getElementById('header'); if (e.pageY >= clientHeight) {
if (header.className.indexOf('home-nav-bottom') < 0) {
header.className += ' home-nav-bottom';
}
} else if (header.className.indexOf('home-nav-bottom') >= 0) {
header.className = header.className.replace(/home-nav-bottom/ig, '');
}
}其實就是判斷是否滑動到對應的位置，然后添加或者刪除 CSS 類名，動畫是 CSS 實現的。
舉報