The7 Sticky Section & Overlap

Fig. 1.1. Sticky Section & Overlap

The7 Sticky Section & Overlap (fig. 1.1) option basically allows making a section sticky when scrolling. This feature is extremely helpful when creating header templates. Comparing to the native Elementor “Motion Effects” panel, The7 Sticky Section & Overlap tool provides a bigger number of flexible features. Therefore, keep in mind that these two “Sticky” sets should not be used together.

You can find all The7 Sticky Section features listed below.

Overlap. When enabled, the row does not take any vertical space on the page and overlaps the content that comes after it. This is particularly useful for creating transparent headers.

Fig. 1.2. Sticky Section. No overlap effect.

Fig. 1.2. Sticky Section. Overlap OFF.

Fig. 1.3. Sticky Section. Overlap ON.

Fig. 1.3. Sticky Section. Overlap ON.

Sticky on. Enables the sticky effect on specific devices. Choose among Desktop, Tablet and Mobile.

Offset. A minimal distance (in pixels) that the row maintains from the top of the browser window. This setting is responsive.

Change Styles When Sticky. You can change the style of the section when scrolling:

  • height;
  • background color;
  • border color;
  • box-shadow.

This is very useful when creating a floating header using Elementor: you may want to change its background color, height, etc. on scroll (fig. 2).

Fig. 2. Style changes on scroll.

Fig. 2. Background color changes on scroll.

Additionally, The7 sticky section can affect some inner widgets with sticky options. For example, “The7 Horizontal Menu” (fig. 3.1) can change colors on scroll and the “Image” widget (fig. 3.2) can change its opacity, width, height, etc.

Fig. 3.1. “The7 Horizontal Menu” widget with an option to change color on sticky.

Fig. 3.2. “Image” widget with additional sticky options.

Hide/Show Section On Scroll (Experimental). This feature (fig. 3.3) allows to control when the sticky section shows up and which part of it can be hidden (entire header, only topbar, etc.).

Fig. 3.3. Hide/Show Section Experimental Feature.

For example, you’d like to hide the tobar in the sticky section (fig. 3.4):

Fig. 3.4. Hide Section By(px)

Second parameter (

Fig. 3.5. Sticky section is hidden first 300px.