以下是我目前的头结构。下面是我目前的头结构。page (根)组件是隐含的。
正如你所看到的 social-links 块的几何形状目前由 header__social-links mix（相对于头部的绝对位置）。
如何正确提取 social-links 到全局（页面）范围，使其成为一个独立的块（在页面上的固定位置）？
如果我在全局（页面）范围内引入 site 或 page 包块 header 然后我就可以申请 page__social-links 混合来解决这个问题。应 header 遂化为 page__header?
<body>
<header class="header hero" role="banner">
<img class="header__logo" src="assets/logo.png" alt="">
<div class="social-links header__social-links">
<a class="link social-links__link" href="#">
<svg class="social-links__icon">...</svg>
</a>
...
<a class="link social-links__link social-links__link--last" href="#">
<svg class="social-links__icon">...</svg>
</a>
</div>
<div class="navbar header__navbar">
<nav class="site-links navbar__site-links">
<a class="link site-links__link" href="#">1</a>
<a class="link site-links__link" href="#">2</a>
<a class="link site-links__link" href="#">3</a>
<a class="link site-links__link" href="#">4</a>
</nav>
</div>
</header>
...
</body>
你应该把这两个作用域分开 header 和 social-links 作为父子。BEM块的隔离很重要。当在同一个元素上使用来自不同块的两个类时，我们有可能在未来出现干扰，以及回归的风险，这时我们会更新一个块而不检查另一个块。
分离也是很重要的，因为要能把? social-links 块。
// Show the fixed header on scroll
var fixedHeader = document.querySelector('.page__social-links');
document.addEventListener('scroll', function() {
if (window.scrollY > 100) {
fixedHeader.classList.remove('page__social-links--hidden');
} else {
fixedHeader.classList.add('page__social-links--hidden');
}
});body {
margin: 0;
height: 300vh;
}
.page__social-links {
position: fixed;
top: 0;
left: 0;
right: 0;
background: hotpink;
}
/* Hide the fixed header by default */
.page__social-links--hidden {
display: none;
}
.header {
border-bottom: 1px solid hotpink;
}
.social-links {
text-align: center;
}
.social-links__link {
padding: 0 0.5em;
line-height: 3em;
}<div class="page">
<div class="page__header">
<header class="header hero" role="banner">
<img class="header__logo" src="assets/logo.png" alt="" />
<div class="header__social-links">
<div class="social-links">
<a class="link social-links__link" href="#">
twitter
</a>
<a class="link social-links__link social-links__link--last" href="#">
facebook
</a>
</div>
</div>
</header>
</div>
<div class="page__social-links page__social-links--hidden">
<div class="social-links">
<a class="link social-links__link" href="#">
twitter
</a>
<a class="link social-links__link social-links__link--last" href="#">
facebook
</a>
</div>
</div>
</div>干杯，托马斯