Skip to content

Commit

Permalink
v3.1.0
Browse files Browse the repository at this point in the history
  • Loading branch information
sutara79 committed May 13, 2017
1 parent 6f47eb7 commit 083c3ba
Show file tree
Hide file tree
Showing 16 changed files with 436 additions and 18 deletions.
13 changes: 13 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,17 @@
# CHANGELOG jquery.simple-scroll-follow

## v3.1.0
#### Add option `upper_side` and `lower_side`
If you use fixed menu such as [Bootstrap .navbar-fixed-top](http://getbootstrap.com/components/#navbar-fixed-top), the options below will help you.

```javascript
$('#foo').simpleScrollFollow({
upper_side: '#menu-fixed-top',
lower_side: '#menu-fixed-bottom'
});
```

- - -
## v3.0.0
#### Option "instance" is deleted.
In v3.x, simpleScrollFollow() always returns jQuery object, so jQuery method chaining always works.
Expand Down
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,8 @@ $('#foo').simpleScrollFollow();
|[limit_elem](http://sutara79.github.io/jquery.simple-scroll-follow/#limit_elem)|Object, string|`$('body')`|Lower limit of target element.|
|[min_width](http://sutara79.github.io/jquery.simple-scroll-follow/#min_width)|number|`0`|When windows width is less narrow than this, this plugin stops.|
|[enabled](http://sutara79.github.io/jquery.simple-scroll-follow/#enabled)|boolean|`true`|If it is `false`, this plugin stops.|
|[upper_side](http://sutara79.github.io/jquery.simple-scroll-follow/#fixed-elem)|string|`null`|Upper side of target element.|
|[lower_side](http://sutara79.github.io/jquery.simple-scroll-follow/#fixed-elem)|string|`null`|Lower side of target element.|
## Public Method
Expand Down
69 changes: 61 additions & 8 deletions dist/jquery.simple-scroll-follow.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* @file jQuery Plugin: jquery.simple-scroll-follow
* @version 3.0.1
* @version 3.1.0
* @author Yuusaku Miyazaki <[email protected]>
* @license MIT License
*/
Expand Down Expand Up @@ -146,7 +146,9 @@ $.extend($.simpleScrollFollow.prototype, /** @lends external:jQuery.simpleScroll
this.option = $.extend({
enabled: true,
limit_elem: $('body'),
min_width: 0
min_width: 0,
upper_side: null,
lower_side: null
}, option);
if (typeof this.option.limit_elem == 'string') {
this.option.limit_elem = $(this.option.limit_elem);
Expand All @@ -161,8 +163,16 @@ $.extend($.simpleScrollFollow.prototype, /** @lends external:jQuery.simpleScroll
* @return {number} - 算出されたoffset_bottom
*/
_calcOffsetBottom: function(elem) {
return $(elem).offset().top +
$(elem).height() +
return $(elem).offset().top + this._calcElemHeight(elem);
},

/**
* @private
* @arg {Object} elem - Target element to calc height
* @return {number} - the height which includes border-width and padding
*/
_calcElemHeight: function(elem) {
return $(elem).height() +
Number($(elem).css('border-top-width' ).replace(/px$/, '')) +
Number($(elem).css('border-bottom-width').replace(/px$/, '')) +
Number($(elem).css('padding-top' ).replace(/px$/, '')) +
Expand All @@ -188,8 +198,8 @@ $.extend($.simpleScrollFollow.prototype, /** @lends external:jQuery.simpleScroll

// 画面の上端、下端を取得
var win = {
scroll_top: $(window).scrollTop(),
scroll_bottom: $(window).scrollTop() + $(window).height()
scroll_top: this._getUpperSide(),
scroll_bottom: this._getLowerSide()
};

// 追尾要素の "現在の" 上端、下端を取得
Expand All @@ -209,6 +219,36 @@ $.extend($.simpleScrollFollow.prototype, /** @lends external:jQuery.simpleScroll
return true;
},

/**
* @private
* @returns {number} Upper side of window
*/
_getUpperSide: function() {
var winScrollTop = $(window).scrollTop();
if (this.option.upper_side) {
var upperLimitBottom = this._calcOffsetBottom(this.option.upper_side);
if (winScrollTop < upperLimitBottom) {
winScrollTop = upperLimitBottom;
}
}
return winScrollTop;
},

/**
* @private
* @returns {number} Lower side of window
*/
_getLowerSide: function() {
var winScrollBottom = $(window).scrollTop() + $(window).height();
if (this.option.lower_side) {
var lowerLimitTop = $(this.option.lower_side).offset().top;
if (winScrollBottom > lowerLimitTop) {
winScrollBottom = lowerLimitTop;
}
}
return winScrollBottom;
},

/**
* @private
* @desc イベントハンドラ: 画面スクロール
Expand Down Expand Up @@ -311,7 +351,7 @@ $.extend($.simpleScrollFollow.prototype, /** @lends external:jQuery.simpleScroll
$(this.follow.elem)
.css({
position: 'fixed',
top: 0,
top: this._getPositionToStickToWindow(this.option.upper_side),
bottom: 'auto',
left: this.follow.offset_left,
right: 'auto'
Expand All @@ -328,13 +368,26 @@ $.extend($.simpleScrollFollow.prototype, /** @lends external:jQuery.simpleScroll
.css({
position: 'fixed',
top: 'auto',
bottom: 0,
bottom: this._getPositionToStickToWindow(this.option.lower_side),
left: this.follow.offset_left,
right: 'auto'
})
.width(this.follow.width);
},

/**
* @private
* @arg {object} limit - this.option.upper_side or this.option.lower_side
* @returns {number} position-top/bottom to stick to window
*/
_getPositionToStickToWindow: function(limit) {
if (limit) {
return this._calcElemHeight(limit);
} else {
return 0;
}
},

/**
* @private
* @desc イベントハンドラ: 画面リサイズ
Expand Down
4 changes: 2 additions & 2 deletions dist/jquery.simple-scroll-follow.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

35 changes: 33 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,10 @@ <h3>
<span class="lang_en">"enabled" for disabling this plugin by default</span>
<span class="lang_ja">"enabled"で追尾の有効・無効を設定する</span>
</a>
<a class="list-group-item" href="#fixed-elem">
<span class="lang_en">Fixed element</span>
<span class="lang_ja">固定要素に隠れないようにする</span>
</a>
<a class="list-group-item" href="#public-method">
<span class="lang_en">Call public method from outside</span>
<span class="lang_ja">パブリックメソッドを外部から実行する</span>
Expand Down Expand Up @@ -231,7 +235,6 @@ <h3 class="panel-title">
Sample <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span>
</a>
</div>
<h6>JavaScript</h6>
<pre>
$('#enabled').simpleScrollFollow({
<span class="green">enabled</span>: <span class="red">true</span>
Expand All @@ -243,6 +246,35 @@ <h6>JavaScript</h6>
</div>
</section>

<section id="fixed-elem" class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
<span class="lang_en">Fixed element</span>
<span class="lang_ja">固定要素に隠れないようにする</span>
</h3>
</div>
<div class="panel-body">
<div class="btn-container">
<a class="btn btn-primary" href="sample/fixed-elem/" target="_blank">
Sample <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span>
</a>
</div>
<p>Since: v3.1.0</p>
<p class="lang_en">
If you use fixed menu such as <a href="http://getbootstrap.com/components/#navbar-fixed-top" target="_blank">Bootstrap .navbar-fixed-top</a>, the options below will help you.
</p>
<p class="lang_ja">
<a href="http://getbootstrap.com/components/#navbar-fixed-top" target="_blank">Bootstrap .navbar-fixed-top</a>のような固定メニューに隠れないようにするため、下記のオプションを指定してください。
</p>
<pre>
$('aside').simpleScrollFollow({
<span class="green">upper_side</span>: '#menu-fixed-top',
<span class="green">lower_side</span>: '#menu-fixed-bottom'
});
</pre>
</div>
</section>

<section id="public-method" class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
Expand All @@ -265,7 +297,6 @@ <h3 class="panel-title">
第1引数にメソッド名を文字列で指定します。<br>
第2引数以降はそのメソッドの引数になります。
</p>
<h6>JavaScript</h6>
<pre>
// apply plugin firstly
$('aside').simpleScrollFollow();
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "jquery.simple-scroll-follow",
"description": "jQuery plugin to move the element according to the scrolling window.",
"version": "3.0.1",
"version": "3.1.0",
"license": "MIT",
"author": "Yuusaku Miyazaki <[email protected]>",
"homepage": "https://github.com/sutara79/jquery.simple-scroll-follow",
Expand Down
Loading

0 comments on commit 083c3ba

Please sign in to comment.