• 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]

X_Plaza

Active member
#1
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...
 

twollert

Active member
#7
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!