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 - 滿版行事曆
下一篇
[十分鐘學習] ScrollToFixed - 捲軸碰觸到即刻釘住
系列文
30天學習30套前端技術(2018年)61
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言