Xenplaza - Magic Floating Sidebar [Deleted]

[X_Plaza]

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

<xen:require js="js/Xenplaza/Xenplaza_floatingSidebar.js" />

Screenshot:

View attachment 33706 ​

Read more about this resource...

 

[kkm323]

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

 

[Jake Hakoda Shirley]

Excellent!~

 

[Bram]

Can somebody share a live demo please? Looks very interesting

 

[Jake Hakoda Shirley]

Hungercraft has this installed.

 

[twollert]

Great, but: There's a little problem with the resource when the sidebar is much higher than the content:

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

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?

 

[twollert]

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

// 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!