Thinking about it, maybe it's worth sharing what I did there. Right?
Not sure if I should put it here since the thread already exists (which is what I'll do now) or into the Template mod boards, if that'd be the better place please tell me. Anyway.
First of all I add all my non-plugin javascript to the bottom of my Forum Wrapper template, but I suppose the Global Footer field would work just as well.
This is the script:
<script>
var scrollUI = document.getElementById("agmScrollID");
var cond1 = 0;
function addScrollClass() {
var scrollUpTrigger = $("#post-list-id").offset().top;
var scrollDownTrigger = $("div.container.quick-reply").offset().top - $(window).height();
if (window.pageYOffset >= scrollUpTrigger) {
if (window.pageYOffset <= scrollDownTrigger) {
scrollUI.classList.remove("agmScrollingOut");
scrollUI.classList.add("agmScrolling");
cond1 = 1;
} else {
if (cond1 != 0) {
scrollUI.classList.remove("agmScrolling");
scrollUI.classList.add("agmScrollingOut");
}
}
} else {
if (cond1 != 0) {
scrollUI.classList.remove("agmScrolling");
scrollUI.classList.add("agmScrollingOut");
}
}
}
</script>
Next up we need to define those classes the script is referencing. So at the bottom of the style sheet (Advanced Styles & CSS) add:
@-webkit-keyframes uiScroll {
from {bottom: -38px;}
to {bottom: 0px;}
}
@keyframes uiScroll {
from {bottom: -38px;}
to {bottom: 0px;}
}
@-webkit-keyframes uiScrollOut {
from {bottom: 0px;}
to {bottom: -38px;}
}
@keyframes uiScrollOut {
from {bottom: 0px;}
to {bottom: -38px;}
}
#agmScrollID {
visibility: hidden;
position: fixed;
bottom: -38px;
width: 90%;
z-index: 500;
}
#agmScrollID.control-bar.ui-helper-clearfix.agmScrolling {
bottom: 0;
visibility: visible;
-webkit-animation-name: uiScroll;
-webkit-animation-duration: 0.1s;
animation-name: uiScroll;
animation-duration: 0.1s;
}
#agmScrollID.control-bar.ui-helper-clearfix.agmScrollingOut {
bottom: -38px;
visibility: visible;
-webkit-animation-name: uiScrollOut;
-webkit-animation-duration: 0.1s;
animation-name: uiScrollOut;
animation-duration: 0.1s;
}Next, you gotta decide which boards should be affected. I currently only have it running on thread page and conversation page, but my theme isn't finished yet. On board pages however I decided to not have a scrolling control bar at all.
I'll take only the thread page as example for now.
Go to Layout Templates > Threads and look for:
<div class="control-bar ui-helper-clearfix $[thread.scroll_class]">
$[search]
<div class="controls">
$[action_menu]
</div>
<div class="float-left">$[thread.icons]</div>
$[pagination]
</div>
</div>
and remove $[thread.scroll_class].
Then copy the entire thing and paste it below its first occurance.
Change the first line of the second iteration so it reads:
<div id="agmScrollID" class="control-bar ui-helper-clearfix">The last thing that has to be done is going back to the Forum Wrapper template and look for the opening bracket of the body element, <body>.
Change it to look like this:
<body {if $[route.name] == "thread"}onscroll="addScrollClass()"{/if}>
You can add as many pages you want to apply this bottom control bar to by adding {elseif} expressions, like this:
<body {if $[route.name] == "thread"}onscroll="addScrollClass()"{elseif $[route.name] == "conversation"}onscroll="addScrollClass()"{elseif $[route.name] == "whateverelseyoumaywant"}onscroll="addScrollClass()"{/if}>
If you did everything right and if I didn't forget anything it'll look something like this:
I hope this will be of any help to anyone.
Open to corrections or improvements to my code, I am aware that technically this would be shorter with jQuery, but I had this already up and running before the thought scratched my mind, so I'll just stick to it for now. No reason to fix something that ain't broken.
Thanks again to
P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ for the $(window).height()-idea.
EDIT: A word maybe to the width value I use in css. It is obviously meant for my forum specifically. You may have to change it to whatever setting you use for your wrapper width, as position:fixed; ignores the parent element apparently.
This can also be fixed by grabbing the width your wrapper is set to with javascript, but I was too lazy to do that yet... Sorry :x
