<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <style> .outer-scroll { position: relative; } .top-box { width: 100%; background: #666; display: none; padding: 10px; } .scroll-box { width: 100%; height: 1000px; top: 0; background: #ccc; position: absolute; padding: 10px; } </style> </head> <body> <div class="outer-scroll"> <div class="top-box"> <h4>This is top menu</h4> <h4>It will be show after touch down</h4> <h4>It will be hidden after touch up</h4> </div> <div class="scroll-box"> <h1>page layout</h1> <h1>page layout</h1> <h1>page layout</h1> <h1>page layout</h1> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> let scroll = document.querySelector('.scroll-box'); let outer_scroll = document.querySelector('.outer-scroll'); let topbox = document.querySelector('.top-box'); let topboxHeight; let touchStart; let touchDis; // 注意若是綁定觸摸時的事件則會在下拉時從手指的下拉位置開始下拉 該事件在手指觸摸屏幕時候觸發，即便已經有一個手指放在屏幕上也會觸發。 scroll.ontouchstart = function (event) { touchStart = 0; touchDis = 0; // 說明：因爲手指頭是多點觸摸到屏幕上的咱們因此e.originalEvent.targetTouches的 // 意思是一個手指觸碰點集合咱們只須要獲取第一個點就能夠了因此 touchStart = event.targetTouches[0].pageY; }; // 當手指在屏幕上滑動的時候連續地觸發。在這個事件發生期間，調用preventDefault()事件能夠阻止滾動。 scroll.ontouchmove = function (event) { // 頂部上下拖拽 let touchPos = event.targetTouches[0].pageY; touchDis = touchPos - touchStart; if (document.documentElement.scrollTop == 0 && touchDis > 0) { topbox.style.display = 'block'; } if (!topboxHeight) { topboxHeight = topbox.offsetHeight; } if (touchDis >= 0) { $(scroll).stop().animate({top: topboxHeight}, 'fast'); } else { if (topbox.style.display == 'block') { $(scroll).stop().animate({top: '0'}, 'fast'); event.preventDefault(); } } }; </script> </body> </html>
移動端頁面頂部滑動實現菜單的彈出與隱藏
相關文章
- 1. 移動端頁面頂部滑動實現菜單的彈出與隱藏
- 2. CoordinatorLayout實現底部菜單滑動顯示與隱藏
- 3. jQuery實現頁面滾動時頂部動態顯示隱藏
- 4. Mac移動隱藏刪除頂部菜單欄圖標教程
- 5. 頁面左側隱藏彈出式菜單，跟隨頁面滾動！
- 6. 利用css頁面隱藏和顯示，實現頁面滑動
- 7. 使用AppBar實現滑動頁面與頂部欄的結合
- 8. Behavior實現滑動隱藏ToolBar與BottomNavigation
- 9. Mysql 實現移動端滑動分頁
- 10. TabLayout、ViewPager、fragment實現可滑動的頂部菜單
- 更多相關文章...
- • jQuery Mobile 表單滑動條 - jQuery Mobile 教程
- • ionic 滑動框 - ionic 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 算法總結-滑動窗口
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. js中 charCodeAt
- 2. Android中通過ViewHelper.setTranslationY實現View移動控制（NineOldAndroids開源項目）
- 3. 【Android】日常記錄：BottomNavigationView自定義樣式，修改點擊後圖片
- 4. maya 文件檢查 ui和數據分離 （一）
- 5. eclipse 修改項目的jdk版本
- 6. Android InputMethod設置
- 7. Simulink中Bus Selector出現很多? ? ?
- 8. 【Openfire筆記】啓動Mac版Openfire時提示「系統偏好設置錯誤」
- 9. AutoPLP在偏好標籤中的生產與應用
- 10. 數據庫關閉的四種方式
歡迎關注本站公眾號,獲取更多信息
