Sticky Sidenav

License Latest Stable Version Total Downloads

A Flarum extension. Make the sidenav section sticky and scrollable. Also support hot-discussions widget.

Motivation

Usually when we make the sidenav section sticky, we have to scroll to the bottom of the page to view the tags that are not shown in the first place. This extension resolves the problem by making the sidenav scrollable, which can be useful when using the AutoMore extension.

Scrollbar

The scrollbar will appear only if there are too many tags AND the mouse is hovering above the sidenav. Example:

example

Installation

Install with composer:

composer require ecnu-im/sticky-sidenav

Updating

composer update ecnu-im/sticky-sidenav
php flarum migrate
php flarum cache:clear

Links

    I've been using sticky sidenav with CSS for over a year, the scrollbar only on hover makes it more clean it's a great improvement, I'm definitely going to switch to this, thanks for the work!

    7 days later

    Report:

    1. Is it possible to keep Sticky when there is a welcome banner?
    2. Not compatible with Forum Stats Widget.


      6 days later

      Subarist

      1. I tested with the welcome banner displayed and the sidenav remained sticky. Did you mean that you would like to make the welcome banner also sticky?

      2. I reproduced this problem when the forum stats widget is under the sidenav:

      However, when the widget is put before the sidenav / in the header / in the footer, it works as expected. I studied about the reason and drew the following conclusion:

      If the elements under the sticky elements need to behave normally, they also need to have position: sticky with a specific top / bottom value while the max-height of the sidenav need to be adjusted as well, which would be forum-specific. Therefore, I would recommend not to put anything below the sticky elements.

          SignorMercurio
          Sorry I missed the notification.
          sticky welcome banner, Yes, also the tags page's banner acts the same way. (pic1)
          Not a big deal, it's just my personal preference, I think it looks better when the sticky function is activated.

          If changing the banner behavior is difficult, or is there a way to add the "start a discussion" button to the sticky as well? I think this is also good. (pic2)
          similar to the following CSS effect：

          @media (min-width: 992px) {
			:not(.TagsPage-nav).sideNav,
			:not(.TagsPage-nav).sideNav>ul {
				width: 190px;
				position: sticky;
				top: 80px;
			}
			.App {
				overflow-x: visible;
			}
		}

          Shame about my bad English expression lo ^^
          pic1 Imgur
          pic2 Imgur

              4 days later

              Subarist

              I think it's possible and may look better, thanks for the suggestion. I'll update the plugin soon.

                v1.1.0

                • Make the "Start a Discussion" button also sticky
                composer update ecnu-im/sticky-sidenav
php flarum cache:clear
                3 months later
                a year later

                Thank you for such a meaningful extension @SignorMercurio!

                In any case, it would be great if the code to preserve stickyness of the right sidebar could target the <div> where the Forum Widget extension encapsulates the whole set of widgets that are placed on the right side. This is a very suitable place for other widgets in addition to Hot Discussions so it is quite likely that other users, like me, have extra stuff there. As an example, in my case, I use:

                Keeping stickyness only for the Hot Discussions extension, creates the weird overlap below:

                Now, I cannot use your extension due to this fact, and it is quite likely that other users face the same limitation. It would be great if it could be easily adapted.