滚动页面时实现头部Logo上下平滑滚动效果

嘿，欢迎来到Stack Overflow！完全理解你不想用position:fixed的需求，咱们可以通过JavaScript监听滚动事件，配合CSS过渡动画来实现Logo平滑上下调整的效果，既能精准控制margin-top的变化，又能保持元素在正常文档流里。下面是针对WordPress场景的具体实现方案：

1. 给Logo添加专属类名 #

先找到你WordPress主题里的Logo元素（一般在header.php文件中），给它加一个自定义类名，比如site-main-logo，方便后续定位：

<!-- 示例：给原有Logo代码添加自定义类名 -->
<a href="<?php echo home_url(); ?>" class="site-main-logo">
    <img src="你的Logo图片地址" alt="网站Logo">
</a>

2. 添加CSS过渡动画 #

在主题的自定义CSS面板（外观→自定义→额外CSS）或者style.css文件中，添加以下样式，让Logo的margin-top变化拥有平滑过渡效果：

.site-main-logo {
    /* 这里设置你初始的margin-top值，根据当前布局调整 */
    margin-top: 60px;
    /* 过渡动画参数：时长0.3秒，缓动效果可选 */
    transition: margin-top 0.3s ease-in-out;
    /* 保持元素在文档流内，不使用fixed */
    position: relative;
}

/* 滚动后要应用的类，将margin-top改为20px */
.site-main-logo.scrolled {
    margin-top: 20px;
}

3. 编写滚动监听的JavaScript #

添加JS代码来监听页面滚动行为，当滚动距离超过设定阈值时，给Logo添加scrolled类；滚动回到顶部时移除该类。你可以把这段代码放到主题的footer.php文件（</body>标签前），或者用Code Snippets这类插件来添加，避免主题更新丢失代码：

<script>
document.addEventListener('DOMContentLoaded', function() {
    const mainLogo = document.querySelector('.site-main-logo');
    // 设置触发变化的滚动阈值，比如滚动超过100px时生效，可按需调整
    const scrollThreshold = 100;

    window.addEventListener('scroll', function() {
        // 获取当前页面滚动距离
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        
        if (scrollTop > scrollThreshold) {
            mainLogo.classList.add('scrolled');
        } else {
            mainLogo.classList.remove('scrolled');
        }
    });
});
</script>

4. 小细节调整建议 #

• 你可以根据自己的布局需求，修改scrollThreshold的值（比如改成50px），控制Logo开始变化的滚动位置。
• 如果初始margin-top不是60px，记得同步修改CSS里的初始值，保证过渡效果自然。

这样实现后，Logo就会随着页面滚动平滑地调整上下间距，完全符合你的需求～如果还有布局细节需要微调，直接修改CSS参数即可。

内容的提问来源于stack exchange，提问作者Sada Khan