Navigation sticky & scrollable

Help / Discuss
#1

Hi all

This might be slightly off topic, bear with me. I’d like to keep the navigation panel sticky and scrollable. A good example of how it should look like is the oracle docs site. Here’s a screenshot.

I found the attributes overflow and position, but setting them messes up the whole screen. To be honest, the last thing I did with HTML that looked similar was <frameset>...</frameset> back in Spry Mosaic days :wink:

Any help highly appreciated!

Cheers

André

#2

If I understand correctly, you’d always want to have the navigation panel visible, independently of where your are in the page? Regarding the scrollable part, you’d simply need to define a vertical max.

These options don’t exist by default so you’d need to develop them, using CSS. Shouldn’t be hard though. It just raised questions about what should happen to other panels, etc. Seems like you’d want to remove other panels in the left panel zone and only keep the navigation panel one, and customize the CSS for it, using a SSX for example (see http://platform.xwiki.org/xwiki/bin/view/DevGuide/SkinExtensionsTutorial).

#3

Hi, Vincent, Could you make this the default setting?
I have a very long navigation list.
Every time after I click an item then I have to scroll down a long way to locate it.
It would be nice if it’s fixed like Visual Studio help.
https://docs.microsoft.com/en-us/visualstudio/help-viewer/installation?view=vs-2019

2 Likes
#4

This would also be a good default feature. Did you have any success on this mod? Im currently trying to do this but I am a beginner. Also, bear with my english as I am not a native English speaker.

Best Regards

#5

Someone would need to develop it and contribute it first!

Then it would require some admin config option to turn on and off. Then there would need to be a vote to decide what’s the default. There are plenty of cases when it’s not a good default so it’s not obvious that it should be the default.

Note that one option to get it, if you can’t develop it, is to contact one of the companies sponsoring the development of XWiki (see https://www.xwiki.org/xwiki/bin/view/Main/Support#HProfessionalSupport) and propose to sponsor it (they would give you a quote).

#6

Hi, I was looking for this feature too.

It was nowhere to be found so I made it myself, if someone is still interested I will post the code bellow which you will have to paste in a JavaScriptExtension.

Note: the extension was made in a few hours and it’s poorly tested, you may need to change some numbers depending on your side bar configuration. I will likely make some changes to the code and update it. When a page has very little content(just a few lines) the side bar doesn’t have the best looks.

I will appreciate any advice on how to improve the code.

require(['jquery'], function($) {

    if($(body).height() > $(window).height()){
      $("#leftPanels").css({"right": "83.33333333333334%","position" : "fixed", "height" : "95%" , "top" : "5%","overflow" : "auto"});
    }else{
       $("#leftPanels").css({"right": "83.33333333333334%","position" : "fixed", "height" : $(contentcontainer).height(), "top" : "5%","overflow" : "auto"});
    }

 var intervalId = window.setInterval(function(){
   if($(body).height() < $(window).height()){
       $("#leftPanels").css({"right": "83.33333333333334%","position" : "fixed", "height" : $(contentcontainer).height() , "top" : "5%","overflow" : "auto"});
    }

}, 200);


$(window).scroll(function() {
    var scrollYpos = $(document).scrollTop();
    if($(body).height() > $(window).height()){
        if (scrollYpos > 50) {
             $("#leftPanels").css({"right": "83.33333333333334%","position" : "fixed", "height" : "100%" , "top" : "0%","overflow" : "auto"});

                  if($(window).scrollTop() + $(window).height() > $(document).height() - 37){
                    $("#leftPanels").css({"right": "83.33333333333334%","position" : "fixed", "height" : $(window).height() * 0.97 +  $(document).height() - $(window).scrollTop() - $(window).height() , "top" :"0%" ,"overflow" : "auto"});
                  }
        }
        else  {
             $("#leftPanels").css({"right": "83.33333333333334%","position" : "fixed", "height" : $(window).height() * 0.95 + scrollYpos , "top" : 50 -scrollYpos,"overflow" : "auto"});
        }
    }
});

});