• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Xenplaza - Magic Floating Sidebar [Deleted]


Active member
X_Plaza submitted a new resource:

Xenplaza - Magic Floating Sidebar (version 1.0.0) - Make your forum's sidebar can floating

This is small modification to make your forum's sidebar can floating. Your forum sidebar will follow your visitors while they scroll up and down the page.

- Upload contents of upload folder to your forum root
- Add following code to the end of template page_container_js_body
<xen:require js="js/Xenplaza/Xenplaza_floatingSidebar.js" />
Read more about this resource...


Active member
I'm using the Magic Floating Sidebar javascript by Xenplaza. Unfortunately he is no longer a active member here.

                 $(function() {
                               $sidebar = $("aside .sidebar")
                               var offset = $sidebar.offset();
                               var topPadding = 10;
                               $parent = $sidebar.parent().parent().children('.mainContainer');
                               $margin = 0;
                               $(window).scroll(function() {
                                               $range = $parent.height() + parseInt($parent.css('margin-top')) + parseInt($parent.css('padding-top'))+ parseInt($parent.css('padding-bottom')) +$parent.offset().top;
                                               $safe =  $parent.height() -  $sidebar.height();
                                               if (($(window).scrollTop() + $sidebar.height() + topPadding) > $range) {
                                                               $("aside .sidebar").stop().animate({
                                                                              marginTop: $safe
                                               }else if ($(window).scrollTop() > offset.top) {
                                                               $margin = $(window).scrollTop() - offset.top + topPadding
                                                               $("aside .sidebar").stop().animate({
                                                                              marginTop: $margin
                                              } else {
                                                                $("aside .sidebar").stop().animate({
                                                                               marginTop: 0
If the sidebar is higher than the content (on the left side) I run into this problem:

1.) Go to http://www.radioforen.de/index.php?members/&type=staff

Everything looks fine.

2.) Scroll down to the end of the site, then scroll back to the top of the site.

A part of the sidebar is hidden now. How can I fix that? Thanks for your help!