Xenplaza - Magic Floating Sidebar [Deleted]

X_Plaza

Active member
X_Plaza submitted a new resource:

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

Description:
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.

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

kkm323

Well-known member
this mod is useful when users are using the sidebar in other places such as threads
watched
 

twollert

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

Code:
// XENPLAZA
 
$(document).ready(function(){
                 $(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!
 
Top