Bug or by designed ? Sidebars don't stick on main page, but on "detailed" page only?
Closed this issue · 15 comments
For example, Sidebars doesn't stick well on https://theme-cards.hbstack.dev (it kind of works)
but on stick well on https://theme-cards.hbstack.dev/blog/2023/11/diagrams-and-charts/
it should keep the same consistence.
It's expected, the sidebar will be sticky until reaching the footer, same as detail pages.
as shown, on page https://theme-cards.hbstack.dev/ it doesn't work.
working now, but but reaching the footer.
Not reaching the footer. (maybe I misunderstood what you meant)
Cloud you please provide full screenshot, OS and browser (version)?
Google Chrome
Version 121.0.6167.85 (Official Build) (x86_64)
The first screenshot already reached the footer (not the page end), so I am closing this.
The problem here is that the sidebar widgets aren't scrolling down until reaching the footer, which makes the sidebar partly hidden, even when there's space to show it fully.
However, the sidebar seems to be working as it should on the demonstration site. No empty space at the bottom of the sidebar.
I noticed that if I add more things to the sidebar, for example another banner, the sidebar will have all its vertical space utilized and then scroll down till the footer as it should.
But then we get that ugly scrollbar for the sidebar.
The main reason I don't think it's worth is that, the user doesn't focus on (care about) the sidebar when they already reached the footer. There are some popular sites do the same. For example,
- https://developer.mozilla.org/en-US/docs/Glossary/Void_element
- https://www.docsy.dev/docs/get-started/
However, the sidebar seems to be working as it should on the demonstration site. No empty space at the bottom of the sidebar.
That's because there has enough content to take full height of sidebar, there will be always empty space if you don't have enough content.
But then we get that ugly scrollbar for the sidebar.
I didn't get the ugly, if you mean the gap between of the ad and sidebar, then it should be a duty of the ad block, you can assign a margin or padding to the ad block.
Decision
Although I don't think it would be useful, I'll provide a module to achieve that, since Flexible and Customizable is one of this framework's features and goals.
Please note that, it may not happen too fast.
When the visitor reached the footer, I prefer to give him options to either leave by clicking an affiliate banner or stay by reading another article. That's why a visible sidebar with its widgets is a most.
Do you think that adding this npm package to the theme's dependencies is useful? Or this for individual widgets?
@LITUATUI I've implemented a simple solution for this, but naming is difficult, I'd name the module as sticky-till-the-end if no further suggestions, let me know if you have any ideas of naming.
Will release the module in those two days.
Thanks @razonyang. That name works for me, it's clear in what it does.
Preview:
sticky-till-the-end.mp4
To achieve this, you'd need to import github.com/hbstack/blog/modules/sticky-till-the-end and github.com/hbstack/docs/modules/sticky-till-the-end for blog and docs layout respectively.
I'm closing this now, please open another issue if there is a bug.
Please put those modules under theme-cards module, otherwise cards theme will be overridden.