CSS能否实现单个元素在页面多处显示？附导航栏场景示例

好问题！先说结论：纯CSS可以实现类似效果，但有明显局限性——如果你的导航栏包含可点击的链接这类交互元素，纯CSS方案无法完整实现；如果只是静态文本，那完全可以做到。

1. 静态文本导航：用CSS伪元素+自定义属性复制内容 #

如果你的导航只是纯文本（没有<a>标签等交互元素），可以把导航内容存在一个自定义属性（比如data-nav）里，然后在页脚通过伪元素::before或::after调用这个属性值，从而避免重复写HTML：

<!-- 只写一次导航元素 -->
<nav data-nav="首页 · 产品 · 关于我们 · 联系我们">
  <!-- 这里可以直接用CSS生成内容，或者保留原内容 -->
</nav>

<!-- 页面内容... -->

<footer></footer>

对应的CSS：

/* 顶部导航的样式 */
nav {
  padding: 1rem;
  background: #fff;
  border-bottom: 1px solid #eee;
}
/* 用伪元素在页脚生成相同内容 */
footer::before {
  content: attr(data-nav);
  display: block;
  padding: 1rem;
  background: #fff;
  border-top: 1px solid #eee;
  text-align: center;
  /* 复制顶部导航的字体、颜色等样式 */
  font-family: inherit;
  color: #333;
}

这种方法的优点是完全不用重复HTML，缺点是伪元素生成的内容没有交互性——不能点击，只能看。

2. 带交互的导航：纯CSS做不到，必须用JS辅助 #

如果你的导航栏里有可点击的链接、下拉菜单这类交互元素，纯CSS就没办法了。因为CSS只能样式化现有元素，不能克隆DOM节点的结构和交互行为。这时候你需要用JavaScript来克隆顶部的导航元素，然后插入到页脚位置：

// 克隆顶部导航
const nav = document.querySelector('nav');
const footerNav = nav.cloneNode(true);
// 插入到页脚
document.querySelector('footer').prepend(footerNav);

当然，你也可以用CSS来控制克隆后的导航样式，比如只在页面滚动到一定位置时显示它，但核心的克隆操作必须靠JS完成。

额外小技巧：用sticky定位模拟“随滚动切换位置” #

如果你的需求不是同时显示两个导航，而是顶部导航滚出视口后，同一个导航出现在页脚位置，可以用position: sticky来实现：

nav {
  position: sticky;
  /* 初始在顶部 */
  top: 0;
  /* 当页面滚动到距离底部0px时，固定在底部 */
  bottom: 0;
  background: #fff;
  border-bottom: 1px solid #eee;
}

不过这个效果是同一个导航元素从顶部“移动”到底部，而不是同时存在两个导航，但也能满足“不用返回顶部就能用导航”的需求，而且完全不用重复HTML或JS。

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