5行js代碼搞定導航吸頂效果

Zhuxy 發布于2019-08-01 17:26 / 3469人閱讀

摘要：一布局首先寫布局二樣式給點簡單的樣式三代碼面向過程直接編寫行代碼搞定面向對象改進，封裝成吸頂函數方便以后直接，封裝方法封裝吸頂函數，需結合實現。

一、HTML布局

首先寫HTML布局

二、CSS樣式

給點簡單的樣式

三、JS代碼 1、面向過程

直接編寫5行代碼搞定

2、面向對象

JS改進，封裝成吸頂函數 ceiling.js 方便以后直接Ctrl+C，Ctrl+V

封裝方法

/* 
 * 封裝吸頂函數，需結合css實現。
 * 也可以直接用js改變樣式，可以自行修改。
 */
    function ceiling(obj) {
        var ot = obj.offsetTop;
        document.onscroll = function () {
            var st = document.body.scrollTop || document.documentElement.scrollTop;
            /*
             * 在這里我給obj添加一個自定義屬性。className可能會影響原有的class
             * 三元運算使代碼更簡潔
             */
            obj.setAttribute("data-fixed",st >= ot?"fixed":"");
        }
    }

調用方法

這是最簡單版本，歡迎大家在此基礎上改進。

云服務器 GPU云服務器 js導航欄代碼導航欄tab切換效果導航菜單代碼 html 導航代碼

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

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

5行js代碼搞定導航吸頂效果

摘要：一布局首先寫布局二樣式給點簡單的樣式三代碼面向過程直接編寫行代碼搞定面向對象改進，封裝成吸頂函數方便以后直接，封裝方法封裝吸頂函數，需結合實現。一、HTML布局首先寫HTML布局二、CSS樣式給點簡單的樣式 *{ margin: 0; padding: 0; } body{ he...

gaosboy 2019-08-22 10:54 評論0 收藏0
5行js代碼搞定導航吸頂效果

摘要：一布局首先寫布局二樣式給點簡單的樣式三代碼面向過程直接編寫行代碼搞定面向對象改進，封裝成吸頂函數方便以后直接，封裝方法封裝吸頂函數，需結合實現。一、HTML布局首先寫HTML布局二、CSS樣式給點簡單的樣式 *{ margin: 0; padding: 0; } body{ he...

KitorinZero 2019-08-29 13:11 評論0 收藏0
踩坑日記(持續更新...)

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

taoszu 2019-08-22 15:00 評論0 收藏0
純css實現手機通訊錄

摘要：不過要是一個簡單的小項目，沒那么多要求的話，純還是能很好的適用的，性能上絕對要比通過滾動監聽強上好多倍，而且引用方便，只要數據生成了就可以直接使用我們經常在手機上看到通訊錄列表，這類布局一般有兩個顯著的效果 showImg(https://segmentfault.com/img/remote/1460000016709371?w=360&h=640); 首字母吸頂快速定位下...

王晗 2019-08-29 16:59 評論0 收藏0
純css實現手機通訊錄

摘要：不過要是一個簡單的小項目，沒那么多要求的話，純還是能很好的適用的，性能上絕對要比通過滾動監聽強上好多倍，而且引用方便，只要數據生成了就可以直接使用我們經常在手機上看到通訊錄列表，這類布局一般有兩個顯著的效果 showImg(https://segmentfault.com/img/remote/1460000016709371?w=360&h=640); 首字母吸頂快速定位下...

蘇丹 2019-08-02 11:44 評論0 收藏0