iT邦幫忙

2018 iT 邦幫忙鐵人賽
0
Modern Web

30天學習30套前端技術(2018年)系列 第 44

[十分鐘學習] Headroom.js - 活化導覽列

example1

把網站空間發揮至到極限,不需要導覽列時隱藏,需要的時候出現。搭配Animate.css可以讓畫面更活潑,另外也支援jQuery或Angluar。

GitHub Star: 9,600
Javascripting Overall: 80%
瀏覽器: ChromeFirefoxIE10+
RWD: 支援
License: MIT


《安裝》

  • CDN

      <!-- Animate.css v3.5.2 -->
      <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
      <!-- Headroom.js v0.9.4 -->
      <script src="https://unpkg.com/headroom.js@0.9.4/dist/headroom.js"></script>
    
  • npm

      $ npm install headroom.js --save
    
  • Bower

      $ bower install https://unpkg.com/headroom.js/bower.zip --save
    

《範例》

  • 導覽列動起來

      <header id="example">Header</header>
      <style>
      	#example {
      		/* 設定Header置頂 */
      		position: fixed;
      		z-index: 10;
      		right: 0;
      		left: 0;
      		top: 0;
      		/* 設定Header樣式 */
      		background: #000;
      		color: #fff;
      		text-align: center;
      	}
      </style>
      <script>
      	var elem = document.getElementById( "example" )
      	var headroom = new Headroom( elem, {
      		// 參數設定[註1]
      		"offset": 100, // 當捲軸到哪時,取消固定
      		"scroller": window, // 捲軸
      		"classes": {
      			"initial": "animated", // 初始的類別
      			"pinned": "flipInX", // 固定時新增的類別(這裡運用Animate.css的類別)
      			"unpinned": "flipOutX", // 取消固定時新增的類別(這裡運用Animate.css的類別)
      			"top": "headroom--top", // 當捲軸在最上面時新增的類別
      			"notTop": "headroom--not-top", // 當捲軸不在最上面時新增的類別
      			"bottom": "headroom--bottom", // 當捲軸在最下面時新增的類別
      			"notBottom": "headroom--not-bottom" // 當捲軸不在最下面時新增的類別
      		},
      		onPin: function() { 
      			// 固定時觸發的事件
      		},
      		onUnpin: function() { 
      			// 取消固定時觸發的事件
      		},
      		onTop: function() { 
      			// 當捲軸在最上面時觸發的事件
      		},
      		onNotTop: function() { 
      			// 當捲軸不在最上面時觸發的事件
      		},
      		onBottom: function() { 
      			// 當捲軸在最下面時觸發的事件
      		}, 
      		onNotBottom: function() { 
      			// 當捲軸不在最下面時事件
      		}
      	});
      	headroom.init();
      </script>
      <div style="height: 10000px">
      	<!-- 內容 -->
      </div>
    

    [註1]

    參數 描述
    offset 當捲軸到哪時,取消固定(單位:像素)
    scroller 捲軸
    classes.initial 初始的類別
    classes.pinned 固定時新增的類別(這裡運用Animate.css的類別)
    classes.top 當捲軸在最上面時新增的類別
    classes.notTop 當捲軸不在最上面時新增的類別
    classes.bottom 當捲軸在最下面時新增的類別
    classes.notBottom 當捲軸不在最下面時新增的類別
    onPin() 固定時觸發的事件
    onUnpin() 取消固定時觸發的事件
    onTop() 當捲軸在最上面時觸發的事件
    onNotTop() 當捲軸不在最上面時觸發的事件
    onBottom() 當捲軸在最下面時觸發的事件
    onNotBottom() 當捲軸不在最下面時事件

《延伸》

  1. Hide your header on scroll - Headroom.js
  2. WickyNilliams/headroom.js: Give your pages some headroom. Hide your header until you need it

上一篇
[十分鐘學習] FullCalendar - 滿版行事曆
下一篇
2018鐵人賽索引和心得(圖多慎入)
系列文
30天學習30套前端技術(2018年)61

尚未有邦友留言

立即登入留言