The “Scroll Behavior” option lets you decide how certain elements behave when the page they are on is being scrolled down.

For example, with this option you can make an element stick to the screen, even when it is not normally in view-port, meaning that it will be displayed even after your visitors scroll down.

Furthermore, with the help of the "Parallax" feature of the "Scroll Behavior" option, you can also add advanced parallax/scroll animations to various elements on your page.

The “Scroll Behavior” option is available for the Button and Image, as well as for the container-type elements, which are: the Background Section, the Content Box, and the grouped Columns element.

Nevertheless, you can set the “Scroll Behavior” option for any other element too, if you place it in a Content Box and then, you set the “Scroll Behavior” option for the Content Box.

This way, the element will behave on scroll the same way that the Content Box, the container, in which it is in.

Here is how to use the “Scroll Behavior” option:

First, drag and drop one of the above-mentioned elements to your page, or in case you already have it on the page, then, just click on it.

The options of the element will be opened in the left sidebar. Click on the “Scroll Behavior” option to open it:

You will see that by default the “Behavior on Scroll” is set to “Static”. This means that at the moment, the element does not move. It stays in its place on the page, when the visitors of the page scroll down:

In order to make use of the first “Scroll Behavior” option, you will need to click on the “Sticky” option. This will open all the settings related to this option:

With the help of these settings, you can make your element “Sticky” on scroll. Just as mentioned above, this means that when a visitor will scroll on your website, the element which is sticky on scroll, will stay on the screen, even after it passes the view-port.

All you have to do is to complete the settings for the sticky state:

First of all, you will need to choose on which devices should the “Scroll Behavior” option, meaning the sticky state, be applied.

By default, all devices are selected:

This means that the sticky state will be available on all three devices.

However, in case you want to deselect a device, you just have to click on it. This way, you can make the sticky state be available on “Tablet & Mobile”, “Desktop & Tablet” or “Desktop only”, “Tablet only”, and “Mobile only”.

Note: If you want to select a device again, you just have to click on it again and it will be selected.

The devices that are selected will have a grey background and the deselected ones will have a white one. Also, below the icons, there will always be a notification, letting you know which devices are selected:

You can then choose if the element should stick to the top or to the bottom of the screen. Choose the desired option from here:

Just as its name says, this setting allows you to set a distance from the top of the screen.

In order to do that, you just have to drag the slider under this setting or enter a number manually in the box next to it. This number will represent the distance in pixels from the top of the screen:

When you set a distance from the top, the element will be sticky on the screen at the respective distance from the top.

Here you can set until what point on the page should the element be sticky. Click on the drop-down next to these settings to see the three ways you can choose from:

End of page - default behavior

This is the default behavior and it means that if you leave this one selected, the element will be sticky (it will remain in view-port on the screen) until the visitors scroll to the end of the page.

End of Parent Container

If you select this behavior, then the element will remain sticky, meaning it will be seen while scrolling, until the Parent Container (for example a Content Box), is displayed on the page. Once the Parent Container passes the view-port, the element will not be displayed anymore either.

It reaches another Element

This behavior is self-explanatory as well. Selecting it will mean that the element will be sticky, will be seen until the scrolling reaches another element chosen by you. Basically, you will have to define another element as the parameter for the “Scroll Behavior” of your element.

When you select the “It reaches another Element” behavior, you will see that another field also appears, the “Element ID” field.

You will have to fill in here the ID of the respective element, that you want to choose as a parameter:

Note: You can set an ID to elements by using the “HTML Attributes” setting, which is the last item from the left-sidebar options.

Just click on it to open it, and then, give an ID to the element by typing it in the “ID” field:

Please keep in mind that when you define this ID, you should not use two separate words; such an ID will not work in this setup.

If you want the ID to consist of two or more words, you will have to connect them with underscores for example.

If you're editing the header of your site, one more option will appear here: the "Switch on scroll" option:

For this, we have written a separate article, so check it out if you want to find out how to use this option on a header.

Besides the "Static" and "Sticky" options, there is a third option available for the “Scroll Behavior”. This is the "Parallax" one:

With the help of this option, you can add various parallax effects to different elements on your page. After you select this option, you will have to click on the "Add New Effect" button to add and set up the effect.

If you want to find detailed information on how to use the "Parallax" effects, please check out the separate step-by-step tutorial that we have about it here.

After you have finished setting up the “Scroll Behavior” option for your element, save the page and preview it, using the “Preview” button from the bottom middle part of the page.

This way you can see how the element will behave when visitors scroll down the page.

In case you want to see more examples on how to use the “Scroll Behavior” option, check out this blog post.

If you need more information on how the various options of Thrive Architect elements work, please check out our tutorials here.

Hopefully, this article was useful for you. If so, please give it a smile below :)