A sticky scrolling image gallery creates a covering effect where each full-width image sticks to the top of the browser as the next one scrolls up and over it. Here’s how to build it using an ACF gallery field and a GenerateBlocks query loop.
Set Up the ACF Gallery Field
This approach requires ACF Pro. In Advanced Custom Fields, open your field group for the page or post type where the gallery will appear and add a new field. Set the field type to Gallery and leave the return format as Image Array. Make sure the location rules are configured to display on the correct page or post type.
Save the field group, then go to the page where the gallery will appear. Open the meta boxes at the bottom of the editor, find the new image gallery field, and upload or select the images. Save the page before moving on.
Build the Query Loop
On the page, insert a new container where the gallery section will live. Inside that container, add a query block — not an inner container. Since the images need to span full width edge to edge, skipping the inner container is intentional.
Set the query type to Post Meta. Leave pagination set to current post, then enter the ACF field name as the meta key. Set the per page number to match the total number of images in the gallery.
Add and Configure the Image Block
Inside the loop item, insert an image block. For the dynamic tag, select Loop Item and enter the meta key as:
image_gallery.urlThis pulls each image URL from the ACF gallery field and displays them in sequence.
With the image block selected, make the following adjustments:
- Set layout display to block to eliminate the small gap that appears beneath inline images
- Set width to 100%
- Set aspect ratio to 16:9 to control the height and keep images proportional
- Set object fit to cover so each image fills its container regardless of the original dimensions
Make the Images Sticky
Select the loop item — the container wrapping each image. Go to Position, change the position to Sticky, and set the top inset to 0 pixels. This makes each image stick to the top of the browser window as the page scrolls, creating the covering effect.
Save the page and check the front end. Each image should stick to the top as the next one scrolls up over it, with the gallery continuing into the rest of the page content after the final image.
Responsive Adjustments
At the tablet breakpoint, the 16:9 aspect ratio keeps the effect working but makes the images shorter. Depending on the design, the aspect ratio can be adjusted per breakpoint to increase the image height and make the effect more dramatic.
On mobile, switching from 16:9 to a 4:3 aspect ratio gives the images more height, which tends to work better at smaller screen widths and keeps the scrolling effect feeling intentional rather than flat.
When to Use This Effect
The sticky scrolling gallery works well for luxury, real estate, hospitality, or any context where large, high-resolution imagery is central to the design. The effect is most impactful on desktop and works best when the images share consistent dimensions or are cropped to a consistent aspect ratio before upload.
