iT邦幫忙

2018 iT 邦幫忙鐵人賽
0
Modern Web

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

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

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 - 活化導覽列
下一篇
2018鐵人賽索引和心得(圖多慎入)
系列文
30天學習30套前端技術(2018年)61

尚未有邦友留言

立即登入留言