# How can I create a dismissable sticky div

**URL:** <https://community.sitejet.io/t/how-can-i-create-a-dismissable-sticky-div/1804>\
**Category:** Website Builder\
**Tags:** cms\_code, cms\_element\
**Created:** [June 10, 2022, 6:46am UTC](https://community.sitejet.io/t/how-can-i-create-a-dismissable-sticky-div/1804 "2022-06-10T06:46:31Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Floris\_van\_Lint](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/floris_van_lint/32/599_2.png) [@Floris\_van\_Lint](https://community.sitejet.io/u/Floris_van_Lint)\
**Post date:** [June 10, 2022, 6:46am UTC](https://community.sitejet.io/t/how-can-i-create-a-dismissable-sticky-div/1804/1 "2022-06-10T06:46:31Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [June 10, 2022, 8:22am UTC](https://community.sitejet.io/t/how-can-i-create-a-dismissable-sticky-div/1804/2 "2022-06-10T08:22:56Z")

</div>

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

Would you have an example on another website, maybe?

---

<div class="post-metadata">

**Author:** ![Floris\_van\_Lint](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/floris_van_lint/32/599_2.png) [@Floris\_van\_Lint](https://community.sitejet.io/u/Floris_van_Lint)\
**Post date:** [June 10, 2022, 8:28am UTC](https://community.sitejet.io/t/how-can-i-create-a-dismissable-sticky-div/1804/3 "2022-06-10T08:28:10Z")

</div>

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](https://www.binder3d.com). 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.

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [June 10, 2022, 10:33am UTC](https://community.sitejet.io/t/how-can-i-create-a-dismissable-sticky-div/1804/4 "2022-06-10T10:33:17Z")

</div>

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:

```auto
$('.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 😃

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/2X/b/bd35a51c1288763e39e0ef303f50d97631f7ed9e.png)

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/2X/2/24e140424e7f4705d97eb2caa32b30fc88f89148.png)

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

---

<div class="post-metadata">

**Author:** ![Floris\_van\_Lint](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/floris_van_lint/32/599_2.png) [@Floris\_van\_Lint](https://community.sitejet.io/u/Floris_van_Lint)\
**Post date:** [June 10, 2022, 10:57am UTC](https://community.sitejet.io/t/how-can-i-create-a-dismissable-sticky-div/1804/5 "2022-06-10T10:57:31Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Floris\_van\_Lint](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/floris_van_lint/32/599_2.png) [@Floris\_van\_Lint](https://community.sitejet.io/u/Floris_van_Lint)\
**Post date:** [July 7, 2022, 1:27pm UTC](https://community.sitejet.io/t/how-can-i-create-a-dismissable-sticky-div/1804/6 "2022-07-07T13:27:54Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [July 8, 2022, 8:15am UTC](https://community.sitejet.io/t/how-can-i-create-a-dismissable-sticky-div/1804/7 "2022-07-08T08:15:35Z")

</div>

Nice one. You are very welcome! 🙂

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [July 8, 2022, 8:15am UTC](https://community.sitejet.io/t/how-can-i-create-a-dismissable-sticky-div/1804/8 "2022-07-08T08:15:39Z")

</div>