社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
首頁 > web前端 > js教程 > 頁面上下滾動改變頂部導航的定位方式

頁面上下滾動改變頂部導航的定位方式

巴扎黑
發布： 2017-07-22 09:22:21
原創
1960 人瀏覽過

 

 

最近碰到設計師的一個設計效果要求，其他網站也有實現：

state1:當網頁向下捲動時，頁面header欄消失，頂部nav往上靠；

state2:當網頁向上滾動時，頁header欄出現，頂部nav順著nav往下靠。

頁面已經含有以下功能：

1、彈窗彈出時，彈跳視窗層可捲動，但頁面層不允許捲動。此時，頁面中的body元素和html元素的overflow樣式屬性都被設定成了hidden；

 

頁面結構如下：

頭

#

上一篇：js選項卡的封裝教程 下一篇：vue重點知識總結
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
javascript - iscroll5 頂部 底部問題
來自於 1970-01-01 08:00:00
0
0
0
javascript - 基於vue的spa網站，部分頁面頭部尾部不固定
來自於 1970-01-01 08:00:00
0
0
0
內部影片
來自於 1970-01-01 08:00:00
0
0
0
個人主頁部落格統計中的「進入部落格」不能點擊
來自於 1970-01-01 08:00:00
0
0
0
為什麼點擊頂部的時候回到了網頁的最上部 ？
來自於 1970-01-01 08:00:00
0
0
0
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板