Unstick Sticky Content

Hi Adam,

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.

Thanks @webdeersign - I will check those stacks out!

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!

1 Like

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!

Happy with that kind of derailment :wink:. Thanks @elixirgraphics

@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


That’s great news. Is such a good looking stack! Thanks for this @webdeersign. Odd they have it labelled as ‘Foundation Only’ on the BWD site.

Will give it a go now…

It was created long before Foundry existed so I expect that message just needs an update.

It works well. I’ve updated the page with the most sidebar content (this one) and it behaves as I need it to.

@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.

(edited for grammar)

yes - i just used it in Foundry columns (and set them to have equal heights). I think i’ll be using it for a few more things going forward.

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.