pbwikifanclub

vietmusic_MovingSideBar

Page history last edited by vietmusic 3 yrs ago

Make a moving SideBar

by vietmusic

Make a moving SideBar

Introduction

You'll notice if you scroll the window that the SideBar follows you everywhere you go. This too is possible through the magic of Javascript. Just add the following code to the bottom of an individual page if you want to install it on one page, or at the bottom of the SideBar if you want it installed wiki-wide.

Code

<script>
window.onload=loadThis;
function loadThis() {
SideBarFloatLoader();
//any other functions here
}
var scrollY;
var topOffSet = 120;
bottomOffSet = 50
function SideBarFloatLoader() {
if (!document.getElementById("SideBar")) return;
document.getElementById("SideBar").style.position = "relative"
if (navigator.appName == "Microsoft Internet Explorer")
document.getElementById("SideBar").style.left = "20px"
window.setInterval("scrollingDetector()", 500);
}
function getScrollY() {
if (navigator.appName == "Microsoft Internet Explorer")
scrollY = document.documentElement.scrollTop;
else scrollY = window.pageYOffset;
}
function scrollingDetector() {
getScrollY();
scrollY=scrollY-topOffSet;
if (scrollY<0) scrollY=0;
if (scrollY + document.getElementById("SideBar").offsetHeight + bottomOffSet > document.getElementById("displaycontent").offsetHeight)
scrollY = document.getElementById("displaycontent").offsetHeight - document.getElementById("SideBar").offsetHeight - bottomOffSet
if (document.getElementById("SideBar").style.top != scrollY + "px")
document.getElementById("SideBar").style.top = scrollY + "px"
}
</script>

If you're using any of my other tricks that require a loadMe() function, just replace "//any other functions here" with the code previously inside of loadMe().

Then just watch the fun scrolliness. It's REALLY great on super long pages of text.