Last active
April 6, 2017 04:08
-
-
Save onozaty/b36bdf49872e76c3139b to your computer and use it in GitHub Desktop.
Slide and scroll sidebar by Redmine view customize plugin
This file contains 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
$(function() { | |
$('#content') | |
.css({ | |
'width': 'auto', | |
'padding-right': '20px' | |
}); | |
var sidebar = $('#sidebar'); | |
var sidebarBaseHeight = sidebar.height(); | |
var sidebarBaseWidth = sidebar.width(); | |
var sidebarBaseOffsetTop = sidebar.offset().top; | |
var toggleFlag = true; | |
sidebar | |
.css({ | |
'background-color': '#EEEEEE', | |
'border': '1px solid #DDDDDD', | |
'padding': '5px', | |
'position': 'absolute', | |
'right': '0', | |
'width': '12px', | |
'height': '12px', | |
'overflow': 'hidden' | |
}) | |
.prepend( | |
$('<a href="#"> ↓ </a>') | |
.css({ | |
'position': 'absolute', | |
'font-weight': 'bold', | |
'font-size': '12px', | |
'text-decoration': 'none', | |
'top': '2px', | |
'right': '0', | |
'border-bottom': '2px solid' | |
}) | |
.click(function(event) { | |
if (toggleFlag) { | |
sidebar.stop().animate({ | |
'padding': '5px 5px 15px 15px', | |
'width': sidebarBaseWidth, | |
'height': sidebarBaseHeight | |
}, 0); | |
$(this) | |
.css({ | |
'border-top': '2px solid', | |
'border-bottom': '' | |
}) | |
.html(' ↑ '); | |
} else { | |
sidebar.stop().animate({ | |
'padding': '5px', | |
'width': '12px', | |
'height': '12px' | |
}, 0); | |
$(this) | |
.css({ | |
'border-top': '', | |
'border-bottom': '2px solid' | |
}) | |
.html(' ↓ '); | |
} | |
toggleFlag = !toggleFlag; | |
event.preventDefault(); | |
}) | |
); | |
var lastWindowScrollTop = $(window).scrollTop(); | |
var onScroll = function() { | |
var windowScrollTop = $(window).scrollTop(); | |
var isUp = lastWindowScrollTop > windowScrollTop; | |
lastWindowScrollTop = windowScrollTop; | |
if (windowScrollTop > sidebarBaseOffsetTop) { | |
var windowHeight = $(window).height(); | |
var sidebarMerginTop = parseInt(sidebar.css('margin-top').replace(/px$/,'') || '0'); | |
var sidebarOuterHeight = sidebar.outerHeight(); | |
var adjustMerginTop = windowScrollTop - sidebarBaseOffsetTop; | |
if (sidebarOuterHeight < windowHeight) { | |
// サイドバーがウインドウサイズより小さい場合 | |
// 先頭位置にあわせて調整 | |
sidebar.css('margin-top', adjustMerginTop + 'px'); | |
return; | |
} | |
if (isUp) { | |
// 上にスクロールした場合、サイドバーの先頭位置にあわせて調整 | |
if (adjustMerginTop < sidebarMerginTop) { | |
sidebar.css('margin-top', adjustMerginTop + 'px'); | |
} | |
} else { | |
// 下にスクロールした場合、サイドバーの末尾位置にあわせて調整 | |
var windowBottomPosition = windowHeight + windowScrollTop; | |
var sidebarBottomPosition = $('#sidebar').offset().top + sidebarOuterHeight; | |
if (windowBottomPosition > sidebarBottomPosition) { | |
sidebar.css('margin-top', (windowBottomPosition - sidebarBaseOffsetTop - sidebarOuterHeight) + 'px'); | |
} | |
} | |
} else { | |
sidebar.css('margin-top', ''); | |
} | |
} | |
$(window).scroll(onScroll); | |
onScroll(); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment