根据导航栏类切换动态调整title-img的margin-top样式

不用JavaScript，纯CSS就能搞定这个需求，而且比JS更稳定，还能避免你遇到的切换时样式无法重置的问题。

核心实现思路 #

利用CSS的相邻兄弟选择器，根据导航栏的类（.navbar或.navbar-fixed）自动控制.title-img的margin-top：

• 默认状态（导航栏用.navbar）：.title-img没有margin-top
• 导航栏用.navbar-fixed时：给.title-img添加20%的margin-top

修改CSS代码 #

在你的CSS文件末尾添加以下规则：

.navbar-fixed ~ .scrollable-container .title-img {
  margin-top: 20%;
}

为什么这个方法有效？ #

你的HTML结构里，导航栏元素（.navbar/.navbar-fixed）是.scrollable-container的直接前兄弟，~选择器会选中.navbar-fixed之后的所有.scrollable-container元素，再嵌套选中里面的.title-img。这样：

• 当导航栏是.navbar-fixed时，这个规则生效，title-img有20%的margin-top
• 当导航栏换成.navbar时，这个选择器不匹配，title-img自动回到默认的无margin-top状态

动态切换导航栏类的处理（可选） #

如果需要在滚动或其他操作中切换导航栏的类，只需要修改导航栏元素的类名即可，CSS会自动同步title-img的样式，不需要额外JS操作样式：

// 示例：滚动到一定位置切换导航栏固定状态
window.addEventListener('scroll', () => {
  const navbar = document.querySelector('.navbar, .navbar-fixed');
  if (window.scrollY > 100) {
    navbar.classList.replace('navbar', 'navbar-fixed');
  } else {
    navbar.classList.replace('navbar-fixed', 'navbar');
  }
});

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