How can I create a dismissable sticky div

[Floris_van_Lint]

Hello,

I’m running into something I can’t seem to create.

What I would like to have, is a dismissable bar fixed at the bottom of the screen, kind of like a cookie bar. It would show some logos from organisations that are supporting the client.

I tried to use the modal, but I am having trouble getting it to do what I want as it always wants to be an overlay as well as at the center of the screen. I also tried the cookie bar, but it is not really customizable.
When creating a div fixed to the bottom of the viewport, it is not dismissable.

What would be the best way to approach this?
Thanks for any suggestions!

[Andre]

Hey @Floris_van_Lint - do you mean something like a floating element?

Would you have an example on another website, maybe?

[Floris_van_Lint]

Hello @Andre

Thank you for your reply.
Yes, precisely like a floating element. You can see an example on the current website of the client here. This is currently done with some kind of plugin, I gather.
I would like to recreate this with sitejet.

This would also be useful on other sites, in order to show a rating / satisfaction, or an important announcement and so on.

[Andre]

Hey @Floris_van_Lint - thank you for the example.

Basically, the Cookie Bar is also just “an element”. You could mimic this element or just create a new one and set the position to fixed and bottom: 0

In that element, you should be able to add the logos and a button on the top right side that triggers the element to close.

If you want to mimic the feature that the element is being closed as if this is a cookie bar, this would be the JS to be added:

$('.your-close-button').click(function(e) {
	e.preventDefault();
	$('.the-container-to-hide').hide();
});

It is recommended to set a CSS class to the element, of course. Otherwise, it won’t work

Please try it out and let me know if that worked out for you

[Floris_van_Lint]

Hello @Andre

Thanks a lot for the suggestion, that looks super helpful. I really appreciate the pointer
I will try it out and let you know!

[Floris_van_Lint]

Hello @Andre it took me a bit of wrangling, as the element kept disappearing, strangely enough. But I got it to do what we wanted. Thanks a lot for the help!

[Andre]

Nice one. You are very welcome!