@tomk79/sidebar-fix NPM

sidebarFix.js

サイドバーをブラウザの表示エリア内に固定するライブラリです。ブラウザで動作します。サイドバーが画面の高さよりも長い場合でも、サイドバーの全体が見きれないように自動的に位置を調整します。

jQueryプラグイン版 jquery.sidebarFix.js と、jQueryを内蔵したスタンドアローン版 sidebarFix.js を同梱しています。

使い方 - Usage

jQuery プラグインとして使う - Using as a jQuery Plugin

<!doctype html>
<html>
	<head>
		<title>jquery.sidebarFix.js SAMPLE</title>
	</head>
	<body>
		<div class="header">
			header
		</div>
		<div class="sidebar-fix-container">
			<div class="column1">
				Contents Area
			</div>
			<div class="column2">
				<div class="sidebar-fix">
					Sidebar
				</div>
			</div>
		</div>
		<div class="footer">
			footer
		</div>

		<!-- jQuery required -->
		<script src="sample_files/jquery-3.6.0.min.js" type="text/javascript"></script>

		<!-- loading jquery.sidebarFix.js -->
		<script src="jquery.sidebarFix.js" type="text/javascript"></script>

		<script type="text/javascript">
			$(window).on('load', function(){
				// .sidebar-fix を固定します
				$('.sidebar-fix').sidebarFix({
					frame: $('.sidebar-fix-container'), // .sidebar-fix-container の上下を基準にフィットさせます
					topBuffer: 100, // スクロールに対して常に上に隙間をとる場合に指定。(固定ヘッダーがある場合など)
					force: true // 強制的に固定します。固定座標がズレる場合に指定すると、矯正的に補正します。
				});
			});
		</script>
	</body>
</html>

スタンドアローンで使う - Using without jQuery

<!doctype html>
<html>
	<head>
		<title>sidebarFix.js SAMPLE</title>
	</head>
	<body>
		<div class="header">
			header
		</div>
		<div class="sidebar-fix-container">
			<div class="column1">
				Contents Area
			</div>
			<div class="column2">
				<div class="sidebar-fix">
					Sidebar
				</div>
			</div>
		</div>
		<div class="footer">
			footer
		</div>

		<!-- loading sidebarFix.js -->
		<script src="sidebarFix.js" type="text/javascript"></script>

		<script type="text/javascript">
			window.addEventListener('load', function(){
				// .sidebar-fix を固定します
				sidebarFix('.sidebar-fix', {
					frame: $('.sidebar-fix-container'),
					topBuffer: 100,
					force: true
				});
			});
		</script>
	</body>
</html>

npm パッケージで使う - Using as a npm package

const sidebarFix = require('@tomk79/sidebar-fix');

// .sidebar-fix を固定します
sidebarFix('.sidebar-fix', {
	frame: $('.sidebar-fix-container'),
	topBuffer: 100,
	force: true
});

既知の問題 - Known problem

サイドバーを固定するために、 position: fixed が設定されます。サイドバーが position: fixed のときの包含ブロックにネストされている場合、固定位置がズレることがあります。\ - force オプションを true にすることで解決できる場合があります。 - 包含ブロックについてはこちらを参照してください。