iT邦幫忙

2018 iT 邦幫忙鐵人賽
0
Modern Web

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

[十分鐘學習] ScrollToFixed - 捲軸碰觸到即刻釘住

  • 分享至 

  • xImage
  •  

example1

這是一套可以將元素釘住(置頂、置底都可以)的jQuery的套件,向左和向右則不影響

GitHub Star: 1,700
Javascripting Overall: -
瀏覽器: ChromeFirefoxIE8+
RWD: 支援
License: MIT


《安裝》

  • CDN

      <!-- jQuery v1.9.1 -->
      <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
      <!-- ScrollToFixed v1.0.8 -->
      <script tsrc="https://cdnjs.cloudflare.com/ajax/libs/ScrollToFixed/1.0.8/jquery-scrolltofixed-min.js"></script>
    
  • npm

      $ npm install scrolltofixed
    

《範例》

  • 捲軸碰到即刻置頂

      <style>
      	#header, #container, #container2, #footer {
      		/* 設定樣式 */
      		background: #000;
      		color: #fff;
      		text-align: center;
      	}
      </style>
      <div style="height: 100px"><!-- 內容 --></div>
      <div id="header">Header</div>
      <div style="height: 100px"><!-- 內容 --></div>
      <div id="container">Container 1</div>
      <div style="height: 100px"><!-- 內容 --></div>
      <div id="container2">Container 2</div>
      <div style="height: 100px"><!-- 內容 --></div>
      <div style="height: 10000px"><!-- 內容 --></div>
      <div id="footer">Footer</div>
      <script>
      	$( "#header" ).scrollToFixed();
      	$( "#container" ).scrollToFixed({
      		// 參數設定[註1]
      		marginTop: $( "#header" ).outerHeight(), // 與上面的間距
      		limit: $( "#container2" ).offset().top, // 超過此高度,取消釘住
      		zIndex: 999, // 圖層深度
      		spacerClass: "spacer", // 間隔的類別名稱
      		minWidth: false, // 當視窗寬度小於此時,關閉釘住功能
      		maxWidth: false, // 當視窗寬度大於此時,關閉釘住功能
      		dontCheckForPositionFixedSupport: false, // 關閉確認瀏覽器是否支援fixed功能
      		dontSetWidth: false, // 當物件是absolute或fixed時,不設定寬度
      		removeOffsets: false, // 當物件是absolute時,移除向左偏移
      		offsets: false, // 設定向左偏移
      		preAbsolute: function() { console.log( "preAbsolute" ) }, // 物件變成absolute後,會呼叫此函式
      		postAbsolute: function() { console.log( "postAbsolute" ) }, // 物件離開absolute後,會呼叫此函式
      		preFixed: function() { console.log( "preFixed" ) }, // 物件變成fixed後,會呼叫此函式
      		postFixed: function() { console.log( "postFixed" ) }, // 物件離開fixed後,會呼叫此函式
      		fixed: function() { console.log( "fixed" ) }, // 物件是fixed時,會呼叫此函式
      		unfixed: function() { console.log( "unfixed" ) }, // 物件不是fixed時,會呼叫此函式
      	});
      	$( "#container2" ).scrollToFixed({
      		marginTop: $( "#header" ).outerHeight() // 與上面的間距
      	});
      	$( "#footer" ).scrollToFixed({
      		bottom: 0 // 置頂與下面的間距
      	});
      </script>
    

    [註1]

    參數 描述

    marginTop|與上面的間距
    bottom|置頂與下面的間距
    limit|超過此高度,取消釘住
    zIndex|圖層深度
    spacerClass|間隔的類別名稱
    minWidth|當視窗寬度小於此時,關閉釘住功能
    maxWidth|當視窗寬度大於此時,關閉釘住功能
    dontCheckForPositionFixedSupport|關閉確認瀏覽器是否支援fixed功能
    dontSetWidth|當物件是absolute或fixed時,不設定寬度
    removeOffsets|當物件是absolute時,移除向左偏移
    offsets|設定向左偏移
    preAbsolute()|物件變成absolute後,會呼叫此函式
    postAbsolute()|物件離開absolute後,會呼叫此函式
    preFixed()|物件變成fixed後,會呼叫此函式
    postFixed()|物件離開fixed後,會呼叫此函式
    fixed()|物件是fixed時,會呼叫此函式
    unfixed()|物件不是fixed時,會呼叫此函式


《延伸》

  1. ScrollToFixed Plugin Demo
  2. bigspotteddog/ScrollToFixed: This plugin is used to fix elements on the page (top, bottom, anywhere); however, it still allows the element to continue to move left or right with the horizontal scroll.

上一篇
[十分鐘學習] Headroom.js - 活化導覽列
下一篇
[十分鐘學習] Handlebars.js - 輕量型模板套件
系列文
30天學習30套前端技術(2018年)61
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言