Sticky or Pinned Effects Are Not Working

Overview

Kinetic Split Scroll creates a two-column storytelling layout:

• A pinned media column
• A scrolling content column

As the visitor moves through the section, the media column can remain in place while the content scrolls beside it.

Depending on the selected settings, the block can also update:

• Active media
• Progress indicator
• Text entrance effects
• Scroll-related visual states
• Mobile media placement

Sticky and pinned behavior depends on the complete page layout, not only on the KineticHub block.

A correctly configured Split Scroll block can stop pinning when one of its parent containers changes overflow, transforms, height, or the scroll context.

Test the public frontend

The complete sticky behavior is not reproduced inside the WordPress editor.

Use Gutenberg to:

• Add media
• Edit content
• Select the pinned side
• Configure the column ratio
• Set the sticky offset
• Configure mobile behavior
• Preview the approximate layout

Test the real pinned behavior on the public frontend.

Use this process:

1. Save or update the page
2. Open the frontend preview
3. Reload the page above the Split Scroll section
4. Scroll through the complete section
5. Test while logged out
6. Test desktop and mobile separately

Do not use the static editor layout as the final reference for sticky behavior.

Confirm that Kinetic Split Scroll is active

Go to:

KineticHub

Confirm that Kinetic Split Scroll is enabled in the block manager.

Also check:

Plugins → Installed Plugins

Confirm that the correct KineticHub package is active.

When the block is disabled or the plugin is inactive, its frontend script and normal rendering may not be available.

Confirm that the block has content

Split Scroll needs meaningful content, media, or both.

Check that the block contains:

• At least one media item
• Headings, paragraphs, buttons, or other allowed content
• Enough content to create a scrollable section

A very short Split Scroll section cannot create a long pinned experience.

If the complete section is shorter than or close to the viewport height, there may be little or no usable scroll distance.

Add enough scrolling content

Pinned media remains meaningful only while the content column provides enough vertical travel.

A useful Split Scroll section normally contains multiple content groups such as:

• Heading
• Paragraph
• Button
• Spacer or intentional section separation
• Second heading
• Second paragraph
• Additional content

When the section contains only one short heading and paragraph, the media may appear to stop pinning immediately because the section ends quickly.

During testing, add enough content to make the section clearly taller than the browser viewport.

Do not publish unnecessary empty spacing only to force a long animation. The final section should contain meaningful content.

Understand the scroll distance

Kinetic Split Scroll calculates its progress using the height of the complete block relative to the viewport height.

The available scroll distance is effectively based on:

section height − viewport height

When the section is not taller than the viewport, there is no meaningful scroll range for media swapping or progress movement.

Possible symptoms include:

• Progress immediately reaches the end
• The first or final media state appears immediately
• Media does not visibly swap
• The pinned effect feels extremely short
• Sticky behavior appears inactive

Increase the meaningful content height and test again.

Check the sticky offset

Kinetic Split Scroll includes a Sticky Offset setting.

The offset controls how far from the top of the viewport the pinned area should remain.

Use it when the website has:

• A fixed header
• A sticky navigation bar
• An administration toolbar
• A persistent announcement bar
• Another element occupying the top of the screen

For example, when the site header is approximately 80 pixels tall, a sticky offset near that value can prevent the media from being covered.

The supported saved offset is constrained to a reasonable range.

Avoid setting a very large offset because it reduces the available viewport space for the pinned media.

Fixed headers

A fixed or sticky site header can make the Split Scroll media appear incorrectly positioned.

Possible symptoms include:

• The media begins under the header
• The top of the image is hidden
• The pinned item appears too low
• The visible media area is shorter than expected
• The section stops pinning earlier

Measure the real frontend header height and use the Split Scroll sticky offset to compensate.

Also test while logged out because the WordPress administration toolbar changes the available top space for administrators.

WordPress administration toolbar

Logged-in administrators may see the WordPress admin bar at the top of the page.

Normal visitors do not.

This can create a different sticky position between:

• Logged-in testing
• Logged-out testing
• Private browser testing

Always verify the final offset while logged out.

Do not configure the production offset only around the administrator toolbar.

Check parent overflow

Sticky positioning can fail when an ancestor uses:

• overflow: hidden
• overflow: clip
• overflow: auto
• overflow: scroll

The browser may treat that ancestor as the relevant scrolling or clipping container.

Inspect every parent between the Split Scroll block and the main page layout.

Common parent blocks include:

• Group
• Cover
• Columns
• Column
• Stack
• Row
• Template part
• Theme content wrapper
• Third-party section container
• Kinetic Box

Temporarily change the nearest suspicious parent to visible overflow on a staging page.

If sticky behavior returns, the parent overflow is the cause.

Do not change overflow globally

Do not apply:

.wp-block-group {
    overflow: visible !important;
}

This can break:

• Rounded corners
• Image cropping
• Masks
• Sliders
• Horizontal containment
• Other page layouts

Identify the exact parent and apply the narrowest possible correction.

Check parent transforms

A transformed ancestor can change the containing context used by sticky, fixed, and positioned elements.

Inspect parent elements for:

• transform
• translate
• scale
• rotate
• perspective
• filter
• backdrop-filter
• will-change: transform

These properties may come from:

• Theme animations
• Entrance effects
• Hover effects
• Kinetic Box
• Page builders
• Custom CSS
• Smooth-scroll libraries
• Animation plugins

Temporarily remove the parent transform on staging.

If sticky behavior returns, move the animation to a different wrapper or avoid nesting the Split Scroll block inside that transformed element.

Avoid sticky inside animated containers

Do not place Split Scroll inside a parent that continuously moves, scales, rotates, or tilts unless the combination has been tested.

A sticky section inside a transformed interactive container may produce:

• Incorrect pinning
• Jumping
• Clipping
• Wrong scroll calculations
• Unstable z-index
• Media movement relative to the wrong ancestor

Use a normal Group block as the immediate parent when possible.

Check parent height

The complete Split Scroll wrapper must have a measurable height.

Problems can occur when:

• The parent uses a fixed height smaller than the content
• The parent uses height: 100% without a defined ancestor height
• The parent collapses around absolutely positioned children
• The section is inside a hidden tab
• A grid row forces an unexpected height
• Flexbox stretching or shrinking changes the layout
• Content is conditionally hidden

Inspect the calculated height in browser developer tools.

The Split Scroll wrapper should be taller than the viewport when a long pinned interaction is expected.

Fixed-height containers

Avoid placing a long Split Scroll section inside a parent with a rigid height such as:

height: 600px;

The parent may clip or constrain the scroll section.

Prefer:

• Natural content height
• Appropriate minimum height
• Normal page flow

Use a fixed height only when the complete interaction has been specifically designed and tested for it.

Check the pinned media height

The pinned media must fit inside the available viewport area.

A sticky element that is taller than the viewport may not behave as expected.

Consider:

• Sticky offset
• Fixed header height
• Browser toolbar
• Media aspect ratio
• Parent padding
• Section padding
• Mobile viewport height

When the media is too tall:

• Reduce the media frame height
• Use a more suitable aspect ratio
• Reduce vertical padding
• Increase object-fit compatibility
• Reduce the sticky offset
• Use a normal mobile flow

The visitor should be able to see the important part of the media while it is pinned.

Pinned side and column ratio

Split Scroll allows the media to be pinned on the left or right.

It also supports column ratios such as:

• 50/50
• 40/60
• 60/40

An extremely constrained content or media column can make the layout appear broken even when sticky positioning is active.

Check:

• Parent content width
• Wide or full alignment
• Theme maximum width
• Column ratio
• Horizontal padding
• Mobile breakpoint
• Long unbroken text

Test the default 50/50 ratio inside a wide or full-width section before applying a more complex layout.

Wide and full alignment

Kinetic Split Scroll supports wide and full alignment.

The actual result depends on theme support.

When the section is unexpectedly narrow:

• Check the block alignment
• Check the parent alignment
• Review the theme content width
• Review the theme wide width
• Inspect root layout padding
• Check the selected page template

A full-width Split Scroll cannot escape a narrow parent container automatically.

Desktop behavior

On desktop, the media column is intended to remain pinned while the content column provides the scroll distance.

When desktop pinning fails:

1. Confirm the block has enough height
2. Check the sticky offset
3. Inspect parent overflow
4. Inspect parent transforms
5. Check whether the pinned media fits inside the viewport
6. Clear cached CSS and JavaScript
7. Confirm that the frontend script loads
8. Test inside a simple top-level Group block

Desktop and mobile use different behavior, so test them independently.

Mobile breakpoint

Kinetic Split Scroll uses a mobile layout at widths up to approximately:

768px

At this width, the block can change from the desktop split layout to a mobile presentation.

Do not expect desktop pinning to continue automatically on every phone.

The mobile result depends on the Enable Sticky Media on Mobile setting.

Mobile sticky disabled

By default, mobile sticky behavior is disabled.

When Enable Sticky Media on Mobile is off:

• The pinned desktop media column is not used as a sticky column
• Media is placed into the mobile content flow
• Related images or videos appear near the corresponding content
• The visitor scrolls through a normal stacked layout
• The Split Scroll scroll engine does not continue running as a mobile sticky experience

This is intentional responsive behavior.

It prevents the media from disappearing while also avoiding an unsuitable pinned layout on narrow screens.

Do not report normal inline mobile media as a broken sticky effect.

Mobile sticky enabled

When Enable Sticky Media on Mobile is on, the block retains its mobile sticky behavior instead of inserting media into the normal content flow.

Use this option carefully.

Test:

• The media height
• The mobile browser toolbar
• Portrait orientation
• Landscape orientation
• Long headings
• Touch scrolling
• Sticky offset
• Content readability
• Device performance

Pinned media can occupy too much space on a small screen when the frame is tall.

A normal inline layout is often more usable for mobile visitors.

Media missing on mobile

When sticky mobile is disabled, the media should appear inside the scrolling content flow.

If it does not appear:

1. Confirm that media items exist
2. Check the page width is below the mobile breakpoint
3. Confirm mobile sticky is disabled
4. Clear mobile and generated asset caches
5. Check whether custom CSS hides the inline media
6. Inspect the content for readable section groups
7. Check the browser console
8. Confirm the latest KineticHub version is installed

Do not enable sticky mobile only to force missing media to appear. First identify why the inline mobile fallback is not visible.

Mobile stacking order

The mobile layout can place:

• Media before content
• Content before media

Review the Mobile Stacking Order setting.

This affects where inline mobile media is placed relative to its related content.

When the order appears reversed, confirm that the selected option matches the intended design.

Also clear separate mobile caches after changing this setting.

Smart Media Swap

Smart Media Swap changes the active pinned media as the visitor progresses through the content.

It requires:

• More than one media item
• Smart Media Swap enabled
• Enough section height
• The frontend scroll engine running
• Reduced motion not disabling the animated swap
• A valid calculated scroll range

When the pinned column works but media does not change:

1. Confirm there are at least two media items
2. Confirm Smart Media Swap is enabled
3. Add enough meaningful content
4. Test from the top of the section
5. Disable reduced motion temporarily for testing
6. Check the browser console
7. Confirm the frontend script loads
8. Test without JavaScript delay

The pinned layout and media swap are related but separate behaviors.

Progress indicator does not move

The line progress indicator reflects the calculated progress through the Split Scroll section.

It may remain static when:

• The section has no usable scroll distance
• The frontend script did not initialize
• The block is using the normal mobile flow
• JavaScript is delayed
• A parent changes the scroll context
• The page is scrolled inside another container
• The progress element is hidden by CSS
• An old optimized script is cached

Check that the complete section is taller than the viewport.

Also inspect whether the browser window is the element actually scrolling.

Nested scroll containers

Some themes or layouts create a scrolling container inside the page.

For example:

.site-content {
    height: 100vh;
    overflow-y: auto;
}

Kinetic Split Scroll measures normal window scrolling.

A custom inner scroll container can cause progress and sticky calculations to differ from the visible movement.

Test the page with normal browser-window scrolling.

When the block works after removing the inner scroll container, the custom scroll system requires separate compatibility work.

Smooth-scroll systems

Smooth-scroll libraries may replace or simulate native scrolling.

Possible symptoms include:

• Sticky media does not pin
• Progress updates late
• Media swaps at the wrong time
• The section jumps
• Calculations use the wrong scroll position
• Scroll behavior differs between browsers

Temporarily disable the smooth-scroll feature on staging.

When native scrolling works correctly, the conflict belongs to the custom scrolling implementation.

Scroll snap

Kinetic Split Scroll can include scroll-snap behavior.

Snap may make content sections settle into clearer reading positions.

When it feels like sticky scrolling is jumping or resisting normal movement:

• Disable scroll snap
• Test normal sticky behavior
• Check parent scroll-snap rules
• Check whether the theme also applies snap
• Test touch scrolling separately

Multiple scroll-snap systems should not control the same scroll area.

Reduced motion

KineticHub respects the visitor’s reduced-motion preference.

For Split Scroll, reduced motion can reduce animated effects such as:

• Smart media transitions
• Text entrance effects
• Parallax
• Other motion-heavy visual enhancements

The content should remain readable.

Do not assume that reduced motion always removes the complete sticky structure.

When media remains pinned but does not animate or swap, check whether reduced motion is enabled.

Hidden tabs, accordions, and popups

Split Scroll may initialize while its parent is hidden.

At that moment, its dimensions may be zero or incorrect.

This can affect:

• Wrapper height
• Sticky position
• Scroll distance
• Progress
• Media dimensions
• Smart Swap timing

Test the same block in a normal visible page section.

When it works there, the tab, accordion, or popup must trigger a layout recalculation after becoming visible.

Compatibility depends on the external component.

Lazy-loaded media

Images or videos can change the section dimensions after the initial page render.

Split Scroll observes layout changes and recalculates its geometry, but conflicts may still occur when another tool:

• Replaces media markup
• Delays media for a long time
• Injects fixed dimensions incorrectly
• Hides the section during loading
• Uses an incompatible lazy-load wrapper

Check the final calculated dimensions after the media has loaded.

Temporarily disable third-party lazy loading to confirm the cause.

JavaScript delay

Delaying JavaScript until the first interaction can prevent Split Scroll from initializing at the correct time.

Possible symptoms include:

• The media begins pinning only after clicking
• Progress starts after the first scroll
• Smart Swap initializes late
• The mobile fallback is not created immediately
• The section uses an incorrect initial height

Temporarily disable JavaScript delay.

Purge all generated scripts and test again.

When the block works, exclude its frontend script from delayed execution.

JavaScript or CSS combination

Optimization tools can change:

• Script order
• Inline data position
• Block-specific script loading
• Sticky CSS
• Mobile media styles
• Progress styles

Temporarily disable:

• JavaScript combination
• JavaScript delay
• Remove Unused CSS
• CSS combination
• Critical CSS

Then regenerate the optimized files and test again.

Remove Unused CSS

An unused-CSS scanner may remove states that appear only after the block initializes.

Possible symptoms include:

• Media layers do not switch
• The active media remains transparent
• Mobile inline media is hidden
• Progress indicators disappear
• Sticky styles are missing
• Text effects remain in their initial state

Exclude the Kinetic Split Scroll stylesheet or related selector namespace from unused-CSS processing.

Check custom CSS

Search custom CSS for rules affecting:

• .kh-ss-wrapper
• .kh-ss-pinned-col
• .kh-ss-scroll-col
• .kh-ss-media-inner
• .kh-ss-media-layer
• .kh-ss-mobile-media-clone
• Generic position: static
• Generic overflow: hidden
• Generic image height rules
• Global sticky overrides

Do not change KineticHub internal classes unless necessary.

Prefer placing a custom class on a parent Group and scoping corrections through that wrapper.

Test outside the current parent

Create a staging test page.

Then:

1. Insert a fresh Kinetic Split Scroll block
2. Place it at the top level
3. Add two media items
4. Add enough meaningful content
5. Use the default 50/50 layout
6. Use a sticky offset of 0
7. Disable custom CSS
8. Disable scroll snap
9. Update the page
10. Test the frontend

If the fresh block works, the original problem is likely caused by its parent, theme, custom CSS, saved configuration, or optimization.

Inspect with browser developer tools

Select the pinned media column and inspect:

• position
• top
• Width
• Height
• Overflow
• Transform
• Z-index
• Display
• Visibility
• Parent dimensions

Also inspect the wrapper height.

The key questions are:

• Is the pinned element using sticky positioning?
• Does it have a valid top offset?
• Is the complete section taller than the viewport?
• Does a parent create another scroll container?
• Does a parent clip the media?
• Is the media taller than the available viewport?
• Is the frontend script running?

Check the browser console

Look for:

• Split Scroll initialization errors
• Resize Observer errors
• Missing frontend scripts
• JavaScript errors from another plugin
• Errors caused by optimization
• Media-loading errors
• Undefined variables
• DOM errors

The first error may prevent later Split Scroll logic from running.

Record the complete message before changing settings.

Recommended troubleshooting sequence

Use this order:

1. Test the public frontend
2. Confirm Split Scroll is enabled
3. Confirm media and content exist
4. Add enough meaningful content
5. Test with sticky offset 0
6. Test desktop separately
7. Review mobile sticky behavior
8. Clear all caches
9. Disable JavaScript delay
10. Disable Remove Unused CSS
11. Test outside the current parent
12. Inspect parent overflow
13. Inspect parent transforms
14. Check wrapper and media height
15. Check for nested scroll containers
16. Check smooth-scroll systems
17. Inspect Console and Network errors
18. Test with a default theme on staging

Begin with the layout and saved settings before adding custom CSS.

Troubleshooting

The media scrolls normally instead of remaining pinned

Check:

• Section height
• Parent overflow
• Parent transforms
• Sticky offset
• Pinned media height
• Mobile breakpoint
• Mobile sticky setting

Test the block inside a simple top-level Group.

The media pins for only a short distance

The complete Split Scroll section is probably not tall enough.

Add meaningful content or reduce the pinned media height.

The media is hidden under the site header

Increase the Sticky Offset to match the fixed header height.

Test while logged out.

The media appears too low

Reduce the Sticky Offset.

Also check parent padding and the WordPress administration toolbar.

Sticky works on desktop but not mobile

This is expected when Enable Sticky Media on Mobile is disabled.

The mobile version uses inline media in the normal content flow.

Mobile media appears in the content instead of remaining pinned

This is the intended fallback when mobile sticky is disabled.

Enable mobile sticky only after testing the usability on a real phone.

Mobile media is completely missing

Confirm that the latest KineticHub version is installed and clear mobile caches.

Inspect .kh-ss-mobile-media-clone, custom CSS, content grouping, and browser errors.

The first media item never changes

Confirm that:

• More than one media item exists
• Smart Media Swap is enabled
• The section has enough scroll distance
• Reduced motion is not active
• The frontend script is running

The progress line does not move

Check section height, JavaScript initialization, mobile mode, and custom scroll containers.

The pinned media jumps

Inspect:

• Image loading
• Parent height changes
• Sticky offset
• Smooth scrolling
• Lazy loading
• Font loading
• Fixed header changes
• Scroll snap

Test after all media and fonts have loaded.

Sticky stops at the correct section end

This is expected.

The media should remain constrained to its Split Scroll section rather than staying fixed across the rest of the website.

Sticky continues into another section

Inspect wrapper height, parent markup, unclosed HTML, custom CSS, and theme layout rules.

The pinned element should remain contained by its own Split Scroll section.

Sticky works until the block is placed inside Kinetic Box

The parent may create a transform, perspective, stacking context, or clipped overflow.

Test outside Kinetic Box and inspect the parent styles.

Sticky works when optimization is disabled

Re-enable optimization settings one at a time.

Create targeted exclusions for Split Scroll JavaScript and CSS.

The editor preview does not pin

This is expected.

Test the public frontend.

The block works in a normal page but not inside a tab

The block probably initialized while hidden or the tab creates its own scroll container.

The tab system must allow recalculation after the content becomes visible.

Information to collect for support

Before contacting KineticHub support, collect:

• KineticHub version
• Free or PRO edition
• Page URL
• Desktop or mobile context
• Sticky Offset value
• Mobile Sticky setting
• Number of media items
• Smart Media Swap setting
• Approximate section height
• Parent block types
• Active theme
• Smooth-scroll or animation plugins
• Cache and optimization plugins
• Custom CSS affecting the section
• Browser Console errors
• Failed Network requests
• Screenshot of computed sticky styles
• Whether the block works outside its parent
• Whether it works with optimization disabled
• Whether it works with a default theme on staging
• A short screen recording of the scroll behavior

Do not include passwords, private access credentials, payment information, or complete license keys.

Next step

Continue with Fix Overflow, Overlap, and Z-Index Conflicts when a KineticHub block is visible and interactive but parts of it are clipped, covered, placed behind another section, or extending outside the intended container.