實現隨著滾動條滾動，導航會自動切換的效果

fjcgreat 發布于2019-08-22 14:56 / 3249人閱讀

摘要：通過監聽的滾動事件，通過滾動高度來判斷那個內容區在當前視口，從而操作對應的導航菜單里的狀態的轉換。

實現導航欄跟隨滾動，點擊導航頁面滾動到相應指定位置？
第一次寫博客，還望指正不足：wo..菜鳥+1
簡單的思路是：
導航菜單里，通過給元素指定 data-socrll-id 屬性，來影射內容區里對應的元素。
如 data-socrll-id="page-a" 對應內容區的元素

。
然后根據篩查所有 data-sorcll-id 的的元素，然后根據這些元素找到對應的內容區。
通過監聽 window的滾動事件，通過滾動高度來判斷那個內容區在當前視口，從而操作對應的導航菜單里的狀態的轉換。點擊導航菜單觸發滾動，與此相對應。
簡單的代碼思路實現：
不知道是不是算自己的一個jquey 插件（jq菜鳥）
優化性能：

增加節流函數

緩存 $()元素對象

未完成可以直接把內容元素信息篩選一遍放到數組里，減少對dom對象的訪問

Title

a b c d

demo測試地址

GPU云服務器云服務器導航跟隨滾動條滾動條html實現 js滾動條到最后數據自動加載 html的滾動條

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93010.html

實現隨著滾動條滾動，導航會自動切換的效果

摘要：通過監聽的滾動事件，通過滾動高度來判斷那個內容區在當前視口，從而操作對應的導航菜單里的狀態的轉換。實現導航欄跟隨滾動，點擊導航頁面滾動到相應指定位置？第一次寫博客，還望指正不足：wo..菜鳥+1簡單的思路是：導航菜單里，通過給元素指定 data-socrll-id 屬性，來影射內容區里對應的元素。如 data-socrll-id=page-a 對應內容區的元素。然后...

Winer 2019-08-01 18:39 評論0 收藏0
踩坑日記(持續更新...)

摘要：二按照官方的提示解決了意思就是切到分支，自己的分支解決沖突，提交。這是和二相反向的操作頁面標題無效的解決辦法強類型轉換的坑條件用正則返回的布爾值結果返回了條件結果也返回了。 2018/3/2 1,vue的{{}}怎么失效了項目使用了twig模板渲染語法{{}}沖突，使用v-text v-html渲染可以寫表達式的寫法字符+變量 2，函數防抖節流封裝實用的下拉加載更多代碼demo...

taoszu 2019-08-22 15:00 評論0 收藏0
【譯】無限滾動加載最佳實踐

摘要：優秀無限滾動的五項原則將無限滾動做好，并不是不可能完成的任務。提供為特定項添加書簽的可能無限滾動最常見的缺點之一就是，內容出現的時候，沒法添加書簽。結論無限滾動實現得好的話，可以達到令人難以置信的光滑無縫體驗。本文轉載自：眾成翻譯譯者：文藺鏈接：http://www.zcfy.cc/article/673原文：https://uxplanet.org/infinite-scrolli...

Sunxb 2019-08-19 18:37 評論0 收藏0
水平居中布局與滾動條跳動的千年難題

摘要：于是，問題來了，信息流頁面，如新浪微博，是從上往下渲染的。，結構類似幾個頁面通過頭部的水平導航刷新切換，結果有的頁面有滾動條，有的沒有。絕大多數的頁面間布局都是水平居中布局，主體定個寬度，然后margin: 0 auto的節奏~例如，婦女之友大淘寶的首頁： .warp{ width:1190px; margin:0 auto; position:relativ...

songjz 2019-07-01 10:20 評論0 收藏0