Make a moving SideBar

by vietmusic

  1. Make a moving SideBar
    1. Introduction
    2. Code
    3. Example

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.

Example

Just look to your right.

This really works best when your SideBar is shorter than the client area.



Page Information

  • 2 years ago [history]
  • View page source
  • You're not logged in
  • No tags yet learn more

Wiki Information

Recent PBwiki Blog Posts