Skip to content

esukei/jquery-fixedinside

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

jquery.fixedinside.js

要素を親コンテナ内で固定表示にすることが出来ます。実際の動きはデモをご覧ください。
You can fix the element in the parent element. Please see the demo.

demos

requirement

jQuery 1.8またはそれ以上
jQuery 1.8 or later

installation

jquery.jsの後にjquery.fixedinside.jsを読み込みます。
Load jquery.fixedinside.js after loading jquery.js.

<script src="/https/github.com/path/to/jquery.js"></script>
<script src="/https/github.com/path/to/jquery.fixedinside.js"></script>

usage

HTML

<div id="container">
    <p id="fixed-element"></p>
</div>

CSS

コンテナにposition relativeまたはabsoluteを適用します。
Set position "relative" or "absolute" to the container.

#container { position: relative; }

固定する要素はposition absoluteまたはfixedを指定します。
Set position "absolute" or "fixed" to the inner element you want to fixed.

#fixed-element {
    position: absolute;
}

JavaScript

固定する要素にfixedinsideメソッドを実行します。
Run fixedinside method to the element you want to fixed.

$(function () {
    $('#fixed-element')
        .fixedinside();
});

options

引数に数値を入力することでオフセット値を指定できます。たとえば、固定されたヘッダーにかぶらなくすることが出来ます。
You can input number to the argument to set offset.

$('#fixed-element')
    .fixedinside(100);

limitation

現バージョンでは、対応している固定位置はtopのみです。
At this version, you can fix-inside the element to top of the container.

Copyright & LICENSE

Copyright 2013 Satoru Kawahara
Licensed under MIT.

About

[jQuery plugin] fix the element inside the container

Resources

Stars

Watchers

Forks

Packages

No packages published