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

 

 

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

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

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

頁面已經含有以下功能：

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

 

頁面結構如下：

頭

#

• 導航一
• 導航二

上一篇：js選項卡的封裝教程 下一篇：vue重點知識總結

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章

• 如何為php數組添加元素
  2023-03-14 15:58:02
• 實例展示JS實現簡單的選擇題測評系統
  1970-01-01 08:00:00
• PHP限制相同IP多次提交的解決辦法
  2023-03-15 07:38:01
• HTML中以正規表示式實作表格驗證
  1970-01-01 08:00:00
• 有關JavaScript嚴格模式下this的指向問題詳解
  1970-01-01 08:00:00
• Java建構樹狀選單（包含多層選單）的實例程式碼
  1970-01-01 08:00:00
• CSS3實現hover離開時平滑過渡的實例詳解
  1970-01-01 08:00:00
• Swiper輪播圖原始碼分享解析
  1970-01-01 08:00:00
• 總結整理VsCode插件
  1970-01-01 08:00:00
• HttpUtils請求工具類別的程式碼
  1970-01-01 08:00:00

最新問題

• 初學者的打字稿，第2部分：基本數據類型
  2025-03-19 09:10:13
• 如何使用源地圖調試縮小JavaScript代碼？
  2025-03-18 15:17:30
• 如何使用瀏覽器開發人員工具有效調試JavaScript代碼？
  2025-03-18 15:16:33
• 如何在瀏覽器中優化JavaScript代碼以進行性能？
  2025-03-18 15:14:33
• 如何創建和發布自己的JavaScript庫？
  2025-03-18 15:12:30

相關專題

更多>

• 打開網頁出現亂碼怎麼解決
• 流量分為哪幾種
• 如何打電話不顯示自己號碼
• dhcp是什麼意思
• keypress事件怎麼觸發
• gt540
• 抖音火花斷了超過三天還能重新點亮嗎
• vb連接資料庫的方法
• 伺服器評測軟體