你可以使用bootstrap afix和affix-top，它可以根据你的滚动在afix和affix-top类之间切换。所以你可以根据你的需要给. afix和.affix-top类给予css。
注意：当用户没有滚动或它滚动回顶部时，会出现affix-top。

是否有一种仅限CSS的技术，可以在用户向上滚动页面后更改固定菜单栏的背景颜色？
不可以。CSS无法根据滚动位置更改规则。

你可以做一点小改动，放置一个透明的绝对位置div，并将滚动距离的估计值转换成top坐标，这样当你滚动到它并悬停它时，就会触发背景的变化。
这是一个通用的例子，但你可以调整坐标和大小来获得好处（hoverable div有边框，只是为了视觉参考）。

body {
  font-family: sans-serif;
  margin: 0px;
  padding-top: 30px;
}

body header,
body footer {
  text-align: center;
  background-color: silver;
  padding: 10px;
}

body header {
  position: fixed;
  top: 0px;
  width: 100%;
  transition: all 3s;
}

.scrolled {
  background-color: gold;
}

.hoverEffect {
  position: absolute;
  height: 200px;
  background: transparent;
  border: 1px solid lightgray;
  text-align: center;
  line-height: 200px;
  top: 432px;
  left: 0px;
  right: 0px;
}

.hoverEffect:hover+header {
  background: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hoverEffect">scroll/hover to this part</div>
<header>
  <nav>Navigation Bar</nav>
</header>
<main>
  <h1>The Main Event</h1>
  <h2>Scroll this page up.</h2>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
</main>
<footer>
  Footer
</footer>