Bricks 整页滚动（FullPage.js）：把一页切成全屏区块

FullPage.js 是经典的整页滚动库。把它集成进 Bricks，可以让每个 Section 占满一屏、滚轮逐屏切换——适合极简产品页、演示页、活动页。

本文基于 BricksLabs 公开免费教程实译，代码完整可复用。原文：How to integrate FullPage.js with Bricks

思路

• 在子主题 functions.php 入队 FullPage.js（库文件 + 初始化）
• 用 CSS 隐藏非当前屏的 section
• 用 JS 初始化 fullpage 实例，sectionSelector 指向 #brx-content > section

代码一：入队 FullPage.js

add_action( 'fullpagejs_enqueue_scripts', function() {
	// 只在前端和 canvas 加载，不在构建器面板加载（避免影响构建器）
	if ( ! bricks_is_builder_main() ) {

        // Fullpage
        wp_enqueue_script( 'fullpage', get_stylesheet_directory_uri() . ...

代码二：关键 CSS

让内容容器块级显示、非当前 section 透明：

body #brx-content {
    display: block;
    min-height: 100vh;
}
body.bricks-is-frontend #brx-content > section {
    opacity: 0;
    transition: 300ms opacity ease;
} 
body.bricks-is-frontend #brx-content > section.fp-section {
    opacity: 1;
}

代码三：初始化 JS

window.addEventListener('load', () => {
    if (!document.body.classList.contains('bricks-is-frontend') ){
    return;
    }

    // Fullpage
    new fullpage('#brx-content', {
        // options here
        autoScrolling:true,
        sectionSelector: '#brx-content > section',
        slideSelector...

小结

• FullPage.js 整页滚动适合单页演示型页面，不适合常规内容站
• 记得只在 bricks-is-frontend 下初始化，避免影响构建器
• 配合 Bricks 的 section 结构，几乎不用改 HTML

延伸阅读

• Bricks 用 IsotopeJS 做筛选（一）
• GSAP 在 Bricks 里的具体例子

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程