MyListing Sticky Blocks

The {CODICTS} MyListing Sticky Blocks plugin makes content blocks on single listing pages stay fixed (sticky) as the user scrolls. This is ideal for 2-column layouts where you want a sidebar — such as contact info, a map, or quick actions — to remain visible while visitors scroll through longer listing content.

Apply sticky behavior by simply adding the CSS class codicts-sticky-block to any content block within a single listing page.

Installation & Activation

Start by downloading the plugin from the Downloads page on your dashboard on the CoDicts website.

After downloading, install and activate the plugin in WordPress by navigating to “Plugins” > “Add New” > “Upload Plugin” and selecting the downloaded zip file. Click “Install Now” and then “Activate”.

After activation, navigate to Sticky Blocks in the admin sidebar to configure the animation and offset settings.

Key Features

Feature	Description
Sticky Content Blocks	Designated content blocks stay fixed while scrolling, constrained within their parent container.
Simple Class-Based Activation	Add the CSS class `codicts-sticky-block` to any content block — no complex configuration needed.
Configurable Animation	Control the animation duration for the sticky scroll effect (instant or smooth follow).
Adjustable Offsets	Configure top and bottom padding offsets to fine-tune sticky positioning around headers and footers.
Responsive Design	Sticky behavior is automatically disabled on screens ≤ 991px wide (mobile/tablet) to preserve usability.
Contained Scrolling	Sticky blocks never scroll beyond their parent container — they stop at the container boundary.

How It Works

The plugin targets single listing pages with 2-column layouts. When a content block has the codicts-sticky-block class, the plugin keeps it fixed in place as the user scrolls through the page — but only within the bounds of the listing’s content area. The block won’t scroll past its parent container.

This is perfect for keeping sidebars with contact info, maps, booking widgets, or quick action buttons visible while visitors browse through longer listing descriptions, galleries, and reviews.

Mobile friendly: Sticky behavior is automatically disabled on screens 991px wide or narrower. On mobile devices, blocks stack vertically and scroll normally.

Applying Sticky Behavior to a Content Block

To make a content block sticky on a single listing page:

1. Open your listing type editor or page builder (e.g., Elementor).

2. Locate the content block you want to make sticky. It must be inside a 2-column layout (a Bootstrap .row with column classes like col-md-4).

3. Add the CSS class codicts-sticky-block to that content block.

4. Save and preview. The block will now stick in place as users scroll through the listing page.

Example Layout

A typical use case is a listing page with a wide content column on the left (description, gallery, reviews) and a narrower sidebar on the right (contact info, map, quick actions):

<div class="row">
    <div class="col-md-8">
        <!-- Main content that scrolls normally -->
        Long listing description, gallery, reviews, etc.
    </div>
    <div class="col-md-4 codicts-sticky-block">
        <!-- This sidebar block will stick while scrolling -->
        Contact info, map, quick actions, etc.
    </div>
</div>

Requirements for sticky blocks: The block must have a Bootstrap column class (e.g., col-md-4, col-lg-6) and be inside a .row container. Without these, the sticky behavior will not be applied.

Multiple sticky blocks: You can add the codicts-sticky-block class to multiple blocks. If multiple sticky blocks are in the same row, they are grouped together and scroll as one unit.

Settings Page

Navigate to Sticky Blocks in the WordPress admin sidebar to configure the sticky behavior.

Setting	Default	Unit	Description
Animation duration	0	Milliseconds	The speed of the sticky scrolling animation. Set to `0` for instant repositioning (best performance). Higher values create a smoother follow effect.
Top offset	0	Pixels	The distance from the top of the viewport where the sticky block anchors. Increase this if you have a fixed header or the WordPress admin bar is visible (e.g., set to `32` for the admin bar).
Bottom offset	30	Pixels	The distance from the bottom of the parent container where the sticky block stops. Prevents the block from overlapping footer content.

Animation Duration Tips

Value	Behavior
`0`	Instant repositioning — the block jumps to follow the scroll. Best performance.
`50` – `200`	Smooth animated follow effect. A good balance of smoothness and responsiveness.
`500+`	Slow, smooth animation. May feel sluggish or laggy on fast scrolling.

Example Setup

1. Activate the plugin with the MyListing theme active.

2. Go to Sticky Blocks in the admin sidebar.

3. Set Animation duration to 0 (instant), Top offset to 32 (to account for the WordPress admin bar), and Bottom offset to 30.

4. Save settings.

5. In your listing type editor, find a sidebar content block (e.g., the contact info block in a col-md-4 column) and add the class codicts-sticky-block.

6. Visit a listing page on the frontend. As you scroll past the sidebar, it stays fixed in place until the main content area ends.

Frequently Asked Questions

Does this require a child theme?

No. This plugin works entirely via JavaScript and does not modify any theme files.

How do I make a content block sticky?

Add the CSS class codicts-sticky-block to any content block on a single listing page. The block must be inside a 2-column layout with Bootstrap column classes.

Will sticky blocks work on mobile devices?

No. Sticky behavior is automatically disabled on screens 991px wide or narrower. On mobile, content blocks stack vertically and scroll normally — this is intentional for usability.

Can I have multiple sticky blocks on the same page?

Yes. Add the codicts-sticky-block class to multiple blocks. If they’re in the same row, they’re grouped into a single sticky wrapper and scroll together.

What’s the difference between animation duration 0 and a higher value?

A value of 0 means the block repositions instantly as you scroll (best performance). Higher values create a smooth animated follow effect but may feel slightly delayed on fast scrolling. Values between 50 and 200 work well for most sites.

Does this work with masonry layouts?

No. Sticky blocks require a standard row/column grid layout. Masonry layouts are not supported.

Does this work on pages other than single listings?

No. The sticky behavior is only applied on single listing pages (post type job_listing). It does not affect archive, explore, blog, or other page types.

Does this work with Elementor?

Yes. You can add the codicts-sticky-block class to any Elementor widget or section placed within a MyListing single listing page’s content block system.

What happens when I deactivate the plugin?

The sticky behavior is simply removed. All content blocks return to their normal scrolling behavior. No data or templates are affected.

Troubleshooting

Sticky Block Not Working

Cause	Solution
Not a single listing page	Sticky behavior only works on single listing pages (post type `job_listing`). It does not apply on other page types.
Missing CSS class	Ensure the block has the class `codicts-sticky-block` applied.
No column class	The block must have a Bootstrap column class (e.g., `col-md-4`, `col-lg-6`). Without one, the plugin skips the block.
Not inside a `.row`	The block must be inside a Bootstrap `.row` container. Single-column layouts have no adjacent content to scroll against.
Masonry layout	Sticky blocks do not work with masonry-style layouts. Use a standard row/column grid.
Viewport too narrow	Sticky behavior is disabled on screens 991px wide or narrower. Test on a wider screen or browser window.
MyListing not active	The plugin requires the MyListing theme. Check Appearance → Themes.

Sticky Block Overlaps Header or Footer

Cause	Solution
Top offset too low	If the block slides behind a fixed header or the WordPress admin bar, increase the Top offset in settings. Set to `32` for the admin bar, or higher if you have a fixed site header.
Bottom offset too low	If the block overlaps footer content, increase the Bottom offset in settings (default is 30px).

Sticky Block Feels Laggy or Jerky

Cause	Solution
Animation duration too high	High animation values (500+) can feel sluggish. Set the Animation duration to `0` for instant repositioning, or use a value between 50 and 200 for a smooth but responsive effect.

“MyListing Theme Not Detected” Error

The MyListing theme must be installed and active. Go to Appearance → Themes to verify.

For further support, visit codicts.com or contact us at support@codicts.com.

Can’t find the help you need?