Created
January 23, 2014 10:06
-
-
Save netwjx/8576022 to your computer and use it in GitHub Desktop.
滚动跟踪,简单的实现,range控制滚动的上下限(和range指定的元素上下边界对齐),支持超出一屏高度的调整
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
scrollFollow = (ele, opts)=> | |
ele = $ ele | |
range = $ opts.range | |
n = 0 | |
lastTop = $(window).scrollTop() - 1 | |
scrolling = -> | |
top = $(window).scrollTop() | |
viewHeight = $(window).height() | |
eleHeight = origEleHeight = ele.height() | |
eleHeight = viewHeight if eleHeight < viewHeight | |
if top < rangeTop = range.offset().top | |
reset = -> | |
ele.css | |
'position': '' | |
'display': '' | |
'top': '' | |
if ele.css('position') is 'absolute' | |
ele.stop(yes).animate | |
'top': rangeTop | |
'fast' | |
reset | |
else | |
reset() | |
else | |
if top + viewHeight > (rangeBottom = rangeTop + range.height()) + eleHeight - origEleHeight | |
t = rangeBottom - origEleHeight | |
if ele.css('position') is 'absolute' | |
ele.stop(yes).animate | |
'top': t | |
'fast' | |
else | |
ele.css | |
'top': t | |
else | |
eleTop = ele.offset().top | |
t = if top > lastTop and top + viewHeight > eleTop + eleHeight | |
top + viewHeight - eleHeight | |
else if top < lastTop and top < eleTop | |
top | |
else | |
undefined | |
if t | |
if ele.css('position') is 'absolute' | |
ele.stop(yes).animate | |
'top': t | |
'fast' | |
else | |
ele.css | |
'top': t | |
ele.css | |
'position': 'absolute' | |
'display': 'inline' | |
lastTop = top | |
$(window).on 'scroll resize', -> | |
clearTimeout n | |
n = setTimeout scrolling, 50 | |
$ -> | |
setTimeout scrolling, i * 500 for i in [1..8] | |
scrollFollow '.sides', | |
range: '.content' |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment