日本av碟片

導航欄自動隱藏代碼headroom.js簡介與使用

發布時間:2018-09-08 16:39:01 來源:青鋒建站 作者:青鋒建站

   使用Headroom.js可以很方便的制作出導航欄隱藏顯示的響應式網站設計效果,以下是青鋒建站給大家整理的Headroom.js使用方法。

Headroom.js 是什么?

  Headroom.js 是一個輕量級、高性能的JS小工具(不依賴任何工具庫!),它能在頁面滾動時做出響應。此頁面頂部的導航條就是一個鮮活的案例,當頁面向下滾動時,導航條消失,當頁面向上滾動時,導航條就出現了。

Headroom.js 有什么用?

  固定頁頭(導航條)可以方便用戶在各個頁面之間切換。但是這也會帶來些問題…大屏幕一般都是寬度大于高度的,也就是說屏幕高度要少一些。固定頁頭會占用一部分本來可以用于展示內容的區域。小屏幕一般是高度較大,但是別忘了,屏幕本來就小,頁頭再占用一部分的話,屏幕可用于展示內容的區域當然還是少。Headroom.js 能幫你把不需要的頁面元素在合適的時間展示出來,讓用戶花更多時間關注你頁面上的內容。

Headroom.js工作原理

簡單來說,headroom.js 只是為需要響應滾動事件的頁面元素增加或刪除一個CSS class:
<!-- 初始狀態 -->
<header class="headroom">
<!-- 向下滾動時 -->
<header class="headroom headroom--unpinned">
<!-- 向上滾動時 -->
<header class="headroom headroom--pinned">
通過CSS class的設置,事情變得簡單了。所有的控制權就交回到了你的手中,當頁面向上或向下滾動時,你就可以通過設置CSS樣式來做出自己需要的變化了。

Headroom.js使用方法

使用 headroom.js 是很簡單的。它提供了簡單的 JS API,另外,還可以作為 jQuery/Zepto 插件使用。
純JS調用方式
// 獲取頁面元素
var myElement = document.querySelector("header");
// 創建 Headroom 對象,將頁面元素傳遞進去
var headroom = new Headroom(myElement);
// 初始化
headroom.init();
以 jQuery/Zepto 插件形式調用
// 是不是很簡單!
// 注意: init() 默認在插件內部被調用了
$("#header").headroom();
插件還提供了一個 data-* API :
<!-- selects $("[data-headroom]") --> <header data-headroom> 注意:為了兼容,Zepto 的data module 也需要引入

Headroom.js參數

Headroom.js 還能接受一個參數對象,用以改變其行為。你可以看一下 Headroom.js 源碼中對 Headroom.options 的定義。其 options 對象的結構如下:

{
    // 在元素沒有固定之前,垂直方向的偏移量(以px為單位)
    offset : 0,
    // scroll tolerance in px before state changes
    tolerance : 0,
    // 對于每個狀態都可以自定義css classes
    classes : {
        // 當元素初始化后所設置的class
        initial : "headroom",
        // 向上滾動時設置的class
        pinned : "headroom--pinned",
        // 向下滾動時所設置的class
        unpinned : "headroom--unpinned"
    }
}
  以上就是青鋒建站給大家分享的使用headroom.js實現導航欄自動顯示隱然代碼的使用方法,青鋒建站,提供專業的高品質建站服務,知名品牌,全國接單。包括網站建設,SEO,網絡營銷,開發方向包括CMS建站開發,PHP原生開發,基于YII框架的系統開發。

分享到:

Copyright © 2016-2026 青鋒建站 版權所有

日本av碟片 武汉快餐女哪些地点有 欢乐麻将可以3个人玩吗 独行侠大胜金州 白小姐中特四肖必选一肖 3d杀码期期准 日本av女优的性爱视频 石家庄小姐上门 山西快乐10分 山西新11选5 av女优水菜丽助阵成人展 西安一条龙桑拿 007足球比分网站 日本女优做爱影片 武汉小姐微信 宁夏11选5开奖 东京热哪个最漂亮