Would it be possible to add some further functionality to the Sticky Content stack to enable it to unstick when the bottom of it is reached by the content below. I know Sticky Grummage can do this kind of thing but it is for Foundation only.
Sticky Content becomes an issue when there is a lot of content in the sticky section. I am playing about with a page here for example that uses a sidebar to allow for navigation within the page. This works great on desktop but it is too long for landscape view on tablet and doesnât look good (or work well) when the page is scrolled to the bottom. Iâve hidden the sticky content block from mobile altogether as it is even worse there. I can see a similar issue arising on my blog page in future when more tags and categories have been added.
Or is anyone aware of any other stacks that would help with this?
I never used BWD Sticky Grummage but I believe that functionality grew into the BWD Pin stack and that became part of BWD Chroma. There is also similar functionality in BlueprintOne AFAIK.
I donât currently have plans for something like this. The stack, during development, had a feature like this, but it caused problems in certain scenarios, so to make things all work together better and not cause those problems I passed on the feature.
This is true. Sticky content should not be overused because of this, IMO, but should instead be used sparingly as to avoid situations like that.
In situations like this I would encourage you to decide if content needs to be âstickiedâ in the first place. Is the content something the visitor is going to need access to at all times.
I have to admit I love the Sticky stack: especially for sidebar content. I think itâs really great that the sidebar links and such are always easily viewable and clickable. But ⌠as an upcoming website grew, and the sidebar grew, I ran into the same problems.
⌠as Adam suggests: is a sticky sidebar really needed? In my case I finally concluded it was more âcoolâ than âfunctionalâ. In the end I went with functional. I donât think the result actually detracts from the website at all by being non-sticky. Everything is still easily enough available. And it still looks good!
I really like it too but yes - it might just be more trouble than it is worth when content might be too long. Would love to achieve something like what Sticky Grummage can do as it looks great (demo here). Canât seem to replicate anything like this using any of the BWD stacks that do work with Foundry (though that might well just be due to my lack of familiarity with these).
I would find this feature useful too. Itâs not only a problem for sidebars with lots of content. For example, if we have a sidebar with only 4 links and want them to appear alongside the main content. If the page also has a footer area, you may not want the links to float over the footer (only next to the main content).
You could use something like this on a product page. You could show a price, quantity and buy it now alway appearing next to the product description and images. Again, once you hit the footer area youâd really want it unstuck.
If youâre set on having a sticky sidebar you might look at doing a Vertical Navigation or Accordion stack inside of the Stick Content stack. Could be a solution depending on you set things up.
As for an âun-stickâ feature â Iâll have a look at it again, but I suspect it may still cause some of the original problems still. I have a lot of other things on the issue tracker ahead of this though.
As a total off-topic aside (I apologize if Iâm derailing the conversation) â @habitualshakerâs Versus app that heâs built a site for is quite nice!
@habitualshaker I found this note about Stick Grummage:
âSticky Grummage works fine in most equalized columns and doesnât actually need Foundation. The best way to use it is with a BluePrint sidebar as the columns as this is a flex box equal height by default column and so there is no JS that could possibly conflict with the sticky calculations.â
So looks like Stick Grumage does work with Foundry and there is even a demo at http://bwd.d.pr/vKI7ql
@webdeersign Thanks for the link to the demo file. Last I played with Sticky Grummage I donât recall seeing the Foundry demo.
@habitualshaker, That looks great. It looks like you just have it in a Foundry 3 column stack, correct? I remember playing with this a few months ago and it wasnât unsticking. Iâll have to revisit it.
Thanks to you both, as this opens up some design ideas that I had shelved.
The only thing to bear in mind is that one that page linked too if the screen is smaller than about 700px in height, you only see the bottom of the sticky when the bottom of the page is reached, which on a long page doesnât give a great user experience.
You most likely already knew this but thought it worth mentioning.